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Введение 


С первого взгляда можно предположить, что НТМГ.5 — это пятая версия языка 
НТМЕ для создания веб-страниц. Но в действительности все не так просто. 


НТМІ5 — неформал. Его придумала группа вольнодумцев, которые не входили в 
группу, отвечавшую за официальный стандарт НТМЕ. В стандарте НТМІ5 разре- 
шаются методы написания страниц, которые были запрещены десять лет тому на- 
зад. В нем подробно изложены инструкции браузерам, как обрабатывать ошибки в 
разметке страниц, чтобы попытаться отобразить эти страницы, вместо того чтобы 
сразу же забраковывать их. Он, наконец, позволяет воспроизведение видео, не при- 
бегая к помощи модулей расширения браузера, таких как, например, Е1аѕћ. Также в 
этом стандарте вводится лавина функциональностей, движимых Јауа$сгірі, которые 
могут придать веб-страницам определенные расширенные, интерактивные возмож- 
ности, встречаемые в программном обеспечении для настольных компьютеров. 


Разобраться в НТМІ5 — задача не из легких. Самой большой проблемой является 
то обстоятельство, что термин "НТМГ.5" используется для обозначения свыше дю- 
жины отдельных стандартов. (Как мы узнаем, эта ситуация является результатом 
эволюции НТМГ5, который начинался как единый стандарт, но впоследствии был 
разделен на более управляемые части.) В действительности, термин "НТМГ.5" сей- 
час означает "НТМГ5 и связанные стандарты" и, в еще более широком понимании, 
"следующее поколение технологий разработки веб-страниц". Вот такую версию 
НТМІ5 мы и будем рассматривать в этой книге: все от базового языка НТМІ5 до 
новых возможностей, сброшенных в одну кучу с НТМГ5, хотя они никогда и не 
были частью этого стандарта. 


Это приводит нас ко второй потенциальной проблеме с НТМІ5 — браузерной под- 
держке. Разные браузеры поддерживают различные части НТМГ5; кроме этого, 
есть такие возможности, которые не работают ни в одном из браузеров. 


Несмотря на все эти трудности, никто не ставит под сомнение, что НТМІ5 — это 
будущее веб-дизайна. Он поддерживается крупными компаниями — разработчика- 
ми программного обеспечения, такими как АррІе и Соое; организация МЗС 
(Мога Мае \№Меб Сопѕогіит, Консорциум Всемирной паутины) прекратила свою 
работу над стандартом ХНТМГ, чтобы формализовать и поддерживать стандарт 
НТМГЕ5; кроме этого, все разработчики браузеров поддерживают значительную 
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часть этого стандарта. Прочитав эту книгу и усвоив ее материал, вы также сможете 
стать членом клуба веб-новаторов и создавать искусные веб-страницы, подобные 


показанной на рис. В1. 


|| 8] САНТМЕ$\ Свариег 07\Мазе. Нет! 


ё Сапуаѕ Маге бате | | 


| 1оаб Еазу Маге | | 1оад Нага Маге | 


910% ~ р 


Рис. В1. В темные времена Интернета (иными словами, где-то около года тому назад) для создания игр 
на веб-страницах нужно было обращаться к помощи модулей расширения браузера, таких как, 
например, ЕІаѕћ. Но благодаря новым возможностям НТМІ5, включая холст (применение которого 
показано на этом рисунке), теперь это можно делать с помощью надежного языка Јауа$сгірі 
без модулей расширения. На этом рисунке НТМЕ5 приводит в действие игру "Лабиринт", 
которая рассматривается в главе 7 


Что нужно знать для работы с этой книгой? 


В этой книге рассматривается НТМГ.5 — самая последняя и самая мощная версия 
стандарта НТМГ. И хотя вам не обязательно быть профессионалом по разметке, 
нужно все-таки иметь определенные навыки в области веб-разработки. Далее при- 
ведено описание основных необходимых навыков. 


Введение 17 


О Создание веб-страниц. Предполагается, что у вас есть опыт создания хотя бы 
нескольких веб-страниц или, по крайней мере, вы понимаете, как использовать 
элементы НТМІ для структурирования содержимого в заголовки, абзацы и спи- 
ски. Если вы полностью несведущи в области веб-разработки, вам лучше начать 
с чего-то более легкого. 


П Опыт работы с таблицами стилей. Современный веб-сайт невозможен без 
применения технологии С58 (Сазсадте Зе ЗБееф, каскадные таблицы стилей), 
посредством которой веб-страницы компонуются и форматируются. Чтобы по- 
нимать излагаемый в этой книге материал, вам нужно знать основы таблиц сти- 
лей — как создавать их, что помещается внутрь их, а также как подключать их к 
веб-странице. Если ваши знания по этой теме несколько туманны, можете по- 
черпнуть основные сведения в приложении 1. Но если материала из приложе- 
ния 1 вам недостаточно или же вы хотите повысить уровень своих знаний в этой 
области до степени, позволяющей создавать по настоящему искусные компо- 
новки и стили, воспользуйтесь какой-либо дополнительной книгой. 


П Опыт работы с Гауа$етре Нет, для создания веб-страниц язык Јауа$сгірі не 
требуется. Но если вы хотите использовать многие ловкие возможности НТМГ5, 
такие как рисование на холсте или взаимодействие с веб-сервером, без ЈауаЅсгірї 
вам не обойтись. Если у вас имеется хоть какой-либо опыт программирования, 
но вы не знакомы с Лауабспирь тогда материал в приложении 2 поможет вам 
чуть-чуть разбираться в этом языке. Но если ваши познания программирования 
нулевые, тогда вы не сможете должным образом понять многие рассматривае- 
мые в этой книге примеры. В таком случае вам следует ознакомиться с более 
подробным введением в программирование вообще и в программирование на 
ЈауаЅстірі в частности. 


Эти требования, к сожалению, не обойти стороной. Такова стоимость возможности 
работать с передовыми технологиями веб-дизайна. 


Написание кода НТМЕ5 


Разметку НТМГ.5 можно создавать с помощью тех же приложений, что и разметку 
обычного НТМГ. Эти приложения могут быть такими простыми, как базовый тек- 
стовый редактор Блокнот (для платформ У\/т40\$) или ТежЕаи (для платформ 
Мас). Многие современные средства разработки (такие как Адобе Огеатуеауег или 
Місгоѕой Ехргеѕѕіоп М№еБ) имеют шаблоны, посредством которых можно быстро 
создавать новые документы НТМІ5. Но базовая структура страницы НТМГ5 на- 
столько простая, что ее можно создать с помощью любого веб-редактора, даже если 
этот веб-редактор не предназначен для работы именно с НТМГ5. 


ПРИМЕЧАНИЕ 


И, конечно же, не имеет никакого значения, на какой платформе создавать и просмат- 
ривать веб-страницы, будь то платформа \Міпаомѕ или самая последняя версия Мас 
ОЅ Х — НТМЕ5 поддерживает операционные системы всех типов. 
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Просмотр страницы НТМЕ5 


В отношении НТМГ.5 часто задается вопрос: какие браузеры поддерживают этот 
стандарт? К сожалению, на этот вопрос нет четкого ответа. Как мы увидим в этой 
книге, НТМТ. в действительности является коллекцией независимых стандартов. 
Некоторые его части уже поддерживаются, а некоторые не будут поддерживаться 
еще в течение нескольких лет (а какие-то, скорее всего, вообще не будут поддер- 
живаться никогда). Ситуация с остальными частями пока не ясна. Это означает, что 
НТМІ5 работает на некоторых версиях некоторых браузеров. 


Вот список основных браузеров, которые поддерживают значительную часть воз- 
можностей НТМГ5, не требуя резервных решений: 


О Шшете! Ехр/огег 9 и более поздние версии; 
О Етеѓох 3.5 и более поздние версии; 

О ОСоозе Сһготе 8 и более поздние версии; 
П бал 4 и более поздние версии; 


О Орета 10.5 и более поздние версии. 


Уровень поддержки браузерами НТМІ5 возрастает с увеличением версии браузера. 
Например, уровень поддержки НТМЕ5 в ЕпеЮх 5 выше, чем в Етеѓох 3.5. 


До рекомендации применять новую возможность НТМТ. в книге ясно указывается 
текущий уровень поддержки этой возможности основными браузерами. Но разра- 
ботчики браузеров выпускают новые версии сравнительно часто, поэтому вам сле- 
дует проводить собственные исследования по текущей поддержке, прежде чем 
применять в своей странице возможность, которая способна вызвать проблемы. 
В этом отношении можно воспользоваться услугами веб-сайта ћќќр://сапіцѕе.сот, 
который предоставляет точную информацию о поддержке определенных возмож- 
ностей конкретными браузерами. (Это полезное средство рассматривается более 
подробно в разд. "Поддерживает ли браузер вашу разметку?" главы 1.) 


ПРИМЕЧАНИЕ 


В этой книге рассматриваются некоторые возможности, о которых заведомо известно, 
что они не работают в некоторых браузерах. Не впадайте по этому поводу в панику. 
Это вполне приемлемо, если вы хотите только получить представление обо всем диа- 
пазоне возможностей НТМІ5, но при этом фокусироваться на тех из них, которые 
можно использовать уже сейчас. А "сырые" функциональности можно рассматривать 
как демонстрацию того, что нас ожидает в Интернете в будущем. 


Когда НТМЕ5 будет готов? 


Общий ответ на этот вопрос таков: он уже готов сейчас. Даже постылый Пщегпе 
Ехр/огег 6, которому 10 лет и который битком набит своеобразными функциями 
обработки веб-страниц, часто должным образом не отображающими эти страницы, 
может отображать элементы НТМІ5. Это достигается тем, что стандарт НТМГ.5 
преднамеренно разрабатывался так, чтобы включать и расширять традиционный 
НТМЕ. 


Введение 19 


Как мы уже узнали, НТМІ5 в действительности является коллекцией разных стан- 
дартов с разным уровнем поддержки браузерами. Поэтому, хотя любой веб- 
разработчик может переключиться на использование документов НТМІ 5 уже сего- 
дня (и некоторые крупные сайты, такие как Соое, УоиТибе и УЛ реа, уже пе- 
решли), может пройти несколько лет, прежде чем использование большей части 
новых хитроумных возможностей НТМГ.5 станет безопасным. По крайней мере, 
без добавления какого-либо механизма резервных решений для менее сообрази- 
тельных браузеров. 


ПРИМЕЧАНИЕ 


По большому счету не имеет особого значения, к какой спецификации принадлежит та 
или иная возможность. Важна современная поддержка браузерами этой возможности, 
а также вероятность ее поддержки в будущем. Когда в этой книге рассматривается ка- 
кая-либо новая возможность, указывается, в какой спецификации она определяется, и 
текущий уровень ее поддержки основными браузерами. 


Разработчикам, которые трепетно относятся к стандартам, может быть интересно 
знать, насколько близки различные стандарты к моменту объявления официального 
статуса. Дать точный ответ на этот вопрос сложно, поскольку создатели НТМІ5 
считают более важным то, что поддерживается браузерами, нежели то, что указано 
в стандарте. Иными словами, веб-разработчики могут использовать по желанию 
любые возможности уже сейчас, если могут заставить их работать. Но веб- 
разработчики, крупные компании, государственные органы и другие организации 
часто составляют свое мнение о готовности языка к применению по официальному 
статусу его стандарта. 


Вообще, в настоящее время спецификация НТМІ5 находится в руках организации 
МЗС в качестве рабочего проекта (жогкіпе ага). Данное определение обозначает, 
что это вполне установившийся стандарт, но такой, что еще может измениться 
в процессе прохождения этапа возможной рекомендации (сапаійаѓе тесоттепдаНоп), 
в который он войдет где-то в 2012г. А вхождение в стадию рекомендации 
(гесоттеп4аНоп) может занять многие годы, т.к. для этого стандарту требуется 
пройти многочисленные тестирования. Но это уже не так важно, т. к. на этом этапе 
изменения будут немногочисленные, и все, кто хочет использовать НТМІ5, уже 
сядут на этот поезд. 


О чем эта книга? 


Двенадцать глав этой книги содержат всеохватывающее руководство по НТМГ5. 
Часть І. Знакомство с новым языком. 


О В главе 1 "Представляем НТМЕ5" рассматривается, как НТМЕ превратился 
в НТМГЕ5. Мы познакомимся с первым документом НТМГ5, увидим, какие из- 
менения претерпел язык, а также обсудим поддержку возможностей браузерами. 


П В главе 2 "Новый способ структурирования страниц" рассматриваются семан- 
тические элементы НТМІ5 — группа элементов, которые могут придать смысл 


20 Введение 


разметке. При правильном использовании эта дополнительная информация мо- 
жет оказаться полезной ДЛЯ браузеров, средств чтения экрана, инструментов для 
веб-дизайна и поисковых систем. 


О В главе 3 "Разметка со смыслом" обсуждается семантика и рассматриваются 
дополнительные стандарты, такие как микроданные. И хотя эти сведения могут 
показаться несколько теоретизированными, веб-разработчиков, которые разбе- 
рутся в них, ожидает достойное вознаграждение — лучшие, более подробные 
результаты поисковых запросов в поисковых системам, таких как Сооз]е. 


Часть П. Создание современных веб-страниц. 


П В главе 4 "Продвинутые веб-формы" исследуются изменения, внесенные 
НТМЕ$ в элементы веб-форм — текстовые поля, списки, флажки и прочие эле- 
менты управления, используемые для сбора информации от посетителей стра- 
ницы. НТМІ5 добавляет несколько новых примочек и некоторые базовые сред- 
ства для улавливания ошибок ввода. 


П В главе 5 "Аудио и видео" изучается одна из самых захватывающих возможно- 
стей НТМГ5 — поддержка воспроизведения видео и аудио. Мы научимся выжи- 
ванию в битве видеокодеков для веба, чтобы создавать страницы, воспроизво- 
дящие мультимедиа во всех браузерах, и даже увидим, как создать собственный 
проигрыватель. 


О В главе 6 "Основы рисования на холсте" рассматривается двумерная поверх- 
ность для рисования — холст. На этом холсте мы научимся рисовать фигуры, 
изображения и текст, и даже на его основе создадим простую программу рисо- 
вания (применив Лауа$ струе). 


П В главе 7 "Продвинутые методы работы с холстом" мы разовьем наши навыки 
работы с холстом и узнаем, как создавать тени и вычурные узоры, а также осво- 
им более продвинутые методы, такие как создание анимации и фигур, активизи- 
руемых щелчком мыши. 


О В главе 8 "Совершенствование стилей с помощью С553" рассказывается о по- 
следней версии стандарта С85, которая хорошо дополняет НТМГ5. Мы научим- 
ся украшать текст вычурными шрифтами, настраивать страницу для отображе- 
ния на разных типах мобильных устройств и добавлять бросающиеся в глаза 
эффекты с помощью переходов. 


Часть Ш. Создание интеллектуальных веб-приложений. 


П В главе 9 "Хранение данных" рассматривается новая функциональность — веб- 
хранилище, которое позволяет странице сохранять информацию на компьютере 
посетителя. (Оно похоже на сооКіеѕ, но на порядок эффективнее.) Мы также 
научимся обрабатывать выбранные пользователем файлы посредством 
ЈауаЅсгірі-кода прямо в веб-странице, а не отправляя их для этого на сервер. 


О В главе 10 "Автономные приложения" исследуется новая функциональность 
кэширования, которая позволяет браузеру работать с веб-страницей даже при 
отсутствии подключения к Интернету. 
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П В главе 11 "Взаимодействие с веб-сервером" мы познакомимся со сложным об- 
меном информацией с веб-сервером. Мы начнем с изучения испытанного вре- 
менем объекта хмінєєрКедџеѕї, который позволяет посредством ЈауаЅсгірі от- 
правлять веб-серверу запросы информации. После этого мы перейдем к рас- 
смотрению двух новых возможностей: отправляемых сервером событий и более 
амбициозной, но не совсем доведенной, функциональности веб-сокетов. 


О В главе 12 "Несколько полезных возможностей на Јауа$сгірі" рассматриваются 
три дополнительные возможности, направленные на решение задач современно- 
го Интернета. Сначала мы увидим, как использовать геолокацию, чтобы устано- 
вить местоположения посетителя страницы. Потом мы воспользуемся веб- 
работниками для выполнения трудоемких задач в фоновом режиме. Наконец, мы 
исследуем функциональность отслеживания истории просмотров страниц, кото- 
рая позволяет синхронизировать ОКІ динамически обновляемой страницы с ее 
текущим содержимым. 


Кроме этого, два приложения помогут вам получить базовые знания, необходимые 
для овладения НТМІ5. В приложении 1 дается краткий обзор С55, а в приложе- 
нии 2 — Лауазспре. 


Онлайновые ресурсы 


Купив эту книгу, вы приобрели больше, чем просто книгу для чтения. Вместе с ней 
вы получили доступ к онлайновым файлам примеров, а также советам, статьям и 
паре-другой видео. 


Недостающий СО 


Эта книга не имеет сопровождающего компакт-диска, но это не значит, что вы что- 
либо теряете. Все рассматриваемые в этой книге примеры можно загрузить по ад- 
ресу ћќр://тіѕѕіпортапиа!ѕ.сот/саѕ5ЉЬёті5тт. Кроме этого, чтобы вам не стирать 
пальцы, вводя ОВГ, упоминаемых в книге веб-сайтов, все они предоставлены в виде 
ссылок на указанной веб-странице. 


СОВЕТ 


Если вы ищете конкретный пример, самый быстрый способ найти его — посмотреть 
на соответствующий рисунок в книге. В конце строки адреса обычно будет на- 
звание файла. Например, на рис. 1.1 указывается путь с\НТМІ5\Сһарїего1\ 
ЅирегЅітріентмі5.һіті, что говорит нам, что файл примера называется 
ЅирегЅітріентТм!і5.һіті. 


Сайт для тестирования примеров книги 


Рассматриваемые в книге примеры можно испытать еще одним способом — на 
странице по адресу ћќр://ууғуғ.ргоѕеѓесһ.сот/Љһті5/. Эта страница содержит все 
примеры из данной книги, которые можно открыть в браузере. Просмотр примеров 
с этой страницы может помочь вам избежать многих проблем, т. к. НТМІ5 содер- 
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жит массу возможностей, для работы которых страница должна предоставляться 
веб-сервером. (Если попытаться открыть страницу с такими возможностями с ло- 
кального жесткого диска, они могут отработать с непредвиденным результатом или 
же не работать вообще.) Просматривая пример с указанного веб-сайта, вы сможете 
увидеть, как он должен работать, перед тем, как загрузить страницу себе на компь- 
ютер и начать экспериментировать с ней. 


ПРИМЕЧАНИЕ 


Не волнуйтесь о примерах, которые нужно запускать с веб-сервера — в книге преду- 
преждается о таких примерах. 


ЧАСТЬ І 


Знакомство 
с новым ЯЗЫКОМ 


Глава 1. Представляем НТМЕ5 
Глава 2. Новый способ структурирования страниц 


Глава 3. Разметка со смыслом 


ГЛАВА 1 


Представляем НТМЕ5 


Историю развития языка НТМІ можно сравнить с детективным рассказом в том, 
что в ней есть свой неожиданный поворот событий, в результате которых появи- 
лась новая версия языка — НТМГ5. 


Предполагалось, что язык НТМІ уйдет в небытие, не дожив до ХХІ столетия. 
Организация МЗС (Мога Мае \еь Сопѕогпит, Консорциум Всемирной паутины), 
которая занимается разработкой и внедрением официальных стандартов Всемирной 
паутины, забросила язык НТМЕ в далеком 1998 г., считая его не способным на 
дальнейшее выживание. Свои надежды на будущее консорциум №ЗС возлагал на 
модернизированного наследника НТМГ — язык ХНТМЕ. Но язык НТМЕ не умер. 
Его "подобрала" группа программистов-аутсайдеров и не только возвратила его к 
жизни, но и заложила основу для новых возможностей, которые мы с вами и иссле- 
дуем в этой книге. 


В данной главе мы выясним, почему язык НТМІ был брошен умирать от старости 
и как он был возвращен к жизни. Мы узнаем основные принципы и возможности 
языка НТМГ5, а также рассмотрим тернистую проблему поддержки этого языка 
разными браузерами. Кроме этого, мы также рассмотрим настоящий документ 
НТМГ5, как его самую простую форму, так и более практический шаблон, который 
можно использовать в качестве отправной точки для создания любого веб-сайта. 


История языка НТМЁ5 


Как вы знаете, НТМГ, — это язык для создания веб-страниц. Ключевая идея языка 
НТМІ — организация содержимого с помощью элементов — не претерпела ника- 
ких изменений с самых ранних времен Всемирной паутины. Более того, даже очень 
старые веб-страницы без проблем обрабатываются в наиболее современных брау- 
зерах (включая и те, которые не существовали на момент создания этих страниц, 
например Етеох или Сһготе). 


Но успех и почтенный возраст также несут с собой определенные существенные 
угрозы. Что и случилось с языком НТМГ — в 1988 г. консорциум МЗС прекратил 
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его поддержку и попытался заменить его языком на основе языка ХМГ — 
ХНТМЕ 1.0. 


Язык ХНТМЕ 1.0: строго по правилам 


В стандарте ХНТМЕ используются те же синтаксические соглашения, что и в 
НТМЕ, но в нем ужесточены требования к следованию установленным правилам. 
Большая часть отступлений от правил разметки, которые сходят с рук в традицион- 
ном НТМГ, попросту неприемлемы в ХНТМГ. 


Например, допустим, что вы хотите выделить курсивом последнее слово заголовка 
следующим образом: 


<Һ1>Из жизни <іруток</і></Һ1> 


Но при этом вы случайно поменяли местами два последних тега: 


<Һ1>Из жизни <і>уток«/Һ1></і> 


Когда браузер сталкивается с этой слегка подпорченной разметкой, он в состоянии 
"понять", что вы действительно имели в виду, и без малейших претензий выделяет 
последнее слово курсивом. Но несовпадающие теги нарушают официальные пра- 
вила ХНТМІ. Если проверить эту страницу в валидаторе формата ХНТМЕ (или 
открыть ее в какой-либо программе для разработки веб-сайтов, например 
Отеатуеауег), то будет выведено сообщение, указывающее на эту ошибку. В от- 
ношении разработки веб-сайтов это полезно, т. к. позволяет отловить небольшие 
ошибки, вследствие которых страница может отображаться по-разному в различ- 
ных браузерах, или которые могут вызвать более серьезные проблемы при попытке 
отредактировать страницу с целью ее улучшения. 


Поначалу ХНТМЕ пользовался большим успехом. Профессиональные веб- 
разработчики, раздосадованные индивидуальными особенностями отображения 
страниц браузерами и вседозволенностью в области веб-разработки, скопом пере- 
ходили на ХНТМГ. При этом они были вынуждены совершенствовать свои навыки 
работы и отказываться от использования значительного количества полусырых 
возможностей форматирования, предоставляемых НТМГ. Но многие из предпола- 
гаемых преимуществ ХНТМІ — такие как функциональная совместимость с инст- 
рументами ХМГ, облегчение обработки страниц автоматизированными програм- 
мами, переносимость на мобильные платформы, а также расширяемость самого 
языка ХНТМІ. — так никогда и не материализовались. 


Тем не менее ХНТМЕ стал стандартом для большинства серьезных веб- 
разработчиков. Но в то время, как все казались достаточно довольными этим язы- 
ком разметки, у него был один скелет в шкафу: хотя браузеры понимали разметку 
ХНТМЕ, они не обеспечивали строгую проверку отступлений от правил, требуе- 
мую этим стандартом. Это означает, что страница может быть создана с нарушени- 
ем правил ХНТМІ, но браузеры и глазом не моргнут при ее обработке. Более того, 
ничто не могло помешать веб-разработчику бросить в одну кучу небрежно напи- 
санную разметку и устаревшее НТМГ-содержимое и назвать все это страницей 
ХНТМЕ. Ни один браузер на планете не имел бы никаких претензий при обработке 
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такой страницы. И это обстоятельство вызывало у людей, ответственных за стан- 
дарт ХНТМГ, глубокое чувство тревоги. 


ХНТМЕ 2: неожиданный провал 


Эта проблема должна была, по идее, быть решенной в следующей версии — 
ХНТМЕ 2. В ней нужно было ужесточить правила обработки ошибок, которые бы 
заставляли браузеры не обрабатывать страницы, не отвечающие стандарту ХНТМІ 2. 
В ХНТМГІ 2 также избавились от многих странностей и соглашений, унаследован- 
ных от НТМЕ. Например, система нумерации заголовков (<һ1>, <һ2>, <һ3> и т. д.) 
была заменена одним элементом <һ> с уровнем обозначаемого им заголовка, зави- 
сящего от местонахождения этого элемента в веб-странице. Подобным образом 
элемент <а> был заменен возможностью, позволяющей веб-разработчикам преоб- 
разовывать любой элемент в ссылку, а вместо атрибута а1+ элемента <іло> был 
предложен новый способ предоставления альтернативного содержимого. 


Изменения такого рода были типичными для ХНТМІ 2. С теоретической точки 
зрения, они делали язык более аккуратным и были более понятными. Но с практи- 
ческой стороны, они вынуждали всех изменить свой подход к созданию веб- 
страниц (не говоря об обновлении уже созданных веб-страниц), не добавляя при 
этом никакой новой функциональности, чтобы оправдать всю эту работу. Попутно 
из ХНТМЕ 2 было удалено несколько удобных элементов, которые все еще пользо- 
вались популярностью среди веб-разработчиков, таких как <5> (полужирный 
текст), <і> (текст курсивом) и <1Егате> (для вложения одной веб-страницы в дру- 
гую). 

Но, возможно, худшей проблемой оказалась чрезвычайно медленная скорость вне- 
сения изменений. Разработка ХНТМІ 2 тащилась в течение пяти лет, и интерес 
разработчиков к этому стандарту медленно угасал. 


НТМІ_5: возвращение к жизни 


Приблизительно в то же самое время (начиная с 2004 г.) группа разработчиков на- 
чала рассматривать будущее Всемирной паутины в другом ракурсе. Вместо того 
чтобы попытаться разобраться, что было неправильным (или просто "грязным" 
с философической точки зрения) в НТМІ, они сфокусировались на том, чего в нем 
не хватало, что хотели бы иметь веб-разработчики для воплощения своих идей. 


В конце концов, НТМІ зародился как инструмент для отображения документов. 
С добавлением языка сценариев ЈауаЅсгірі НТМЕ преобразовался в систему для 
разработки веб-приложений, таких как поисковые движки, онлайновые магазины, 
картографические инструменты, средства чтения электронной почты и многие дру- 
гие. Но в то время как искусное веб-приложение может делать много чего впечат- 
ляющего, создать такое приложение — задача не из легких. Большинство разработ- 
чиков использует для этого мешанину кода ЈауаЅстірі, один или несколько попу- 
лярных инструментариев Јауа$сгірі, а также веб-приложение, исполняемое на 
веб-сервере. Добиться правильного и единообразного взаимодействия всех этих 
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составляющих на разных браузерах — сложная задача. Даже когда все наконец 
работает, нужно постоянно "присматривать за скотчем и скобами", которые удер- 
живают всю конструкцию. 


Такая ситуация вызывала особенную озабоченность среди разработчиков браузе- 
ров, поэтому группа дальновидных разработчиков из компании Орега Зой\аге 
(создатели браузера Орега) и компании Мо7Ша ГКоипдаНоп (создатели браузера 
Еігеѓох) начали агитировать за включение в ХНТМЕ больше возможностей, ориен- 
тированных на разработчиков. Когда их попытки не увенчались успехом, компании 
Орега, Мох Ша и Арр!е создали группу МНАТ№С (\МеБ Нурегіехі АррИсайоп 
ТесһпоЇіору Могкіпо Отоир, рабочая группа по технологии гипертекстовых веб- 
приложений) с целью работы над новыми решениями. 


Группа не ставила перед собой задачу заменить НТМГ, ее целью было плавное 
расширение языка, и причем такое, чтобы расширения были обратно совместимы- 
ми. Надо сказать, что самая ранняя версия работы этой группы включала две спе- 
цификации расширений — \!еб АррИсайопз 1.0 и \еБ Еогтѕ 2.0. В конечном итоге 
эти стандарты эволюционировали в НТМГ5. 


ПРИМЕЧАНИЕ 


Предполагается, что число 5 в названии НТМЕ5 означает: данный стандарт является 
продолжением стандарта НТМІ (последней версией стандарта НТМЁЕ перед ХНТМЕ 
была версия 4.01). Это, конечно же, не совсем верно, т. к. НТМЕ5 поддерживает все 
разработки, существовавшие в области создания веб-страниц в течение десяти лет 
после выпуска НТМЕ 4.01, включая строгий синтаксис в стиле ХНТМЕ (если разработ- 
чики желают использовать его), а также множество инноваций для Јауа$сгірї. Тем не 
менее это название делает ясным следующее: язык НТМЕ5 может поддерживать со- 
глашения ХНТМЕ, но требует следования правилам НТМІ. 
К 2000 г. все интересное происходило в лагере группы МНАТМС. После некоторо- 
го периода болезненных размышлений организация \!ЗС решила распустить рабо- 
тающую над ХНТМЕ 2 группу и работать вместо этого над формализацией стан- 
дарта НТМГ5. На этом этапе первоначальный стандарт НТМГ5 был разделен на 
более управляемые части, и многие из его функциональных возможностей стали 
отдельными стандартами (см. врезку. "На профессиональном уровне. Что входит 
в состав НТМЕ5?" далее). 


СовеТ 


Ознакомиться с официальной версией стандарта НТМЕ5 организации \\/ЗС можно на 
веб-сайте по адресу: мам.муЗ.огд/ТВ/һіті5. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Что входит в состав НТМІ 5? 


Браузеров, "поддерживающих" НТМЕ5, не существует. Вместо этого, каждый браузер 
поддерживает постепенно расширяющееся подмножество возможностей НТМІ5. Этот 
подход является как хорошим, так и плохим. Хорош он потому, что браузеры могут 
быстро реализовать готовые части стандарта НТМЕ5, пока другие возможности про- 
должают развиваться. А плох он тем, что заставляет веб-разработчиков беспокоиться 
о проверке, поддерживает ли конкретный браузер каждую функциональную возмож- 
ность, которую они хотят использовать. (Трудные и не очень трудные методы такой 
проверки рассматриваются далее в этой книге.) 
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Далее приводится список и короткое описание основных категорий функциональных 
возможностей, охватываемых НТМІ 5. 


• Ядро НТМІ5. Эта часть НТМІ5 составляет официальную версию спецификации 
организации МЗС. Она содержит новые семантические элементы (см. главы 2 и 3), 
новые и усовершенствованные элементы управления для веб-форм (см. главу 4), 
поддержку аудио и видео (см. главу 5), а также холст для рисования с помощью 
Јауа$стірї (см. главы 6 и 7). В эту категорию входит большинство функциональных 
возможностей, которые наилучшим образом поддерживаются браузерами. 


» Ранние возможности НТМЕ5. Это возможности, которые были реализованы в 
первоначальной спецификации НТМІ5, подготовленной группой М/НАТМ/С. Боль- 
шинство из них — это спецификации для возможностей, требующих ауаЗспри и 
поддерживающих развитые веб-приложения. Наиболее важными являются ло- 
кальное хранение данных (см. главу 9), приложения, работающие в автономном 
режиме (см. главу 10), и обмен сообщениями (см. главу 11), но также несколько 
других, которые рассматриваются в этой книге. 


• Возможности, иногда называемые НТМІ5. Это возможности следующего поко- 
ления, которые часто считаются частью НТМЕ5, хотя они никогда не входили 
в стандарт НТМІ5. Эта категория включает спецификацию С$$3 (см. главу 8) и 
геолокацию (см. главу 12). 


Путаница с этими стандартами создается не только ничего не сведущими менедже- 
рами и авторами статей о технологиях. Даже сама организация \/ЗС размывает гра- 
ницы между "настоящим" НТМЕ5 (как определено этим стандартом) и "маркетинговой" 
версией (которая включает все новшества и кухонную раковину). Например, офици- 
альный веб-сайт организации \\/ЗС по логотипам (м/м. м3З.огд/ИнтМЛодо) призывает 
разработчиков генерировать логотипы НТМІ5, продвигающие стандарты С$$3 и 
$\С-2, разработка которых велась задолго до появления НТМІ5. 


НТМЕ: живой язык 


В результате перехода поддержки НТМГ сначала от организации МЗС к группе 
\!НАТУ/С, а потом обратно, возникла довольно необычная ситуация. Технически 
организация МЗС отвечает за определение, что является официальным НТМГ5, а 
что — нет. Но в то же самое время группа МНАТМС продолжает свою работу, 
придумывая будущие возможности НТМІ. Только теперь она называет его не 
НТМГЪ, а просто НТМГ, объясняя это тем, что НТМІ будет продолжать существо- 
вать, как живой язык. 


Так как НТМЕ является живым языком, то НТМГ-страница никогда не устареет и 
не перестанет работать. Для НТМГ-страниц никогда не потребуется номер версии 
(даже в блоке указания типа документа <досеуре>), а веб-разработчикам никогда не 
понадобится обновлять свою разметку от одной версии языка к другой, чтобы она 
работала на новых браузерах. 


Так как НТМЕ — это живой язык, новые возможности (и новые элементы) можно 
добавлять к стандарту НТМІ в любое время. Некоторые разработчики могут ре- 
шить использовать эти возможности в своих веб-страницах, а некоторые разработ- 
чики веб-браузеров — поддерживать их в своих продуктах. Но возможности нико- 
гда не будут привязаны к какой-либо конкретной версии стандарта. 
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Обычно, когда веб-разработчики слышат о новшествах, первым делом они прихо- 
ДЯТ В полный ужас. В конце концов, кому охота иметь дело с поддержкой стандар- 
та, требования которого варьируются в широком диапазоне, где разработчикам 
нужно выбирать возможности на основе вероятности поддержки этих возможно- 
стей? Но немного поразмыслив, большинство веб-разработчиков нехотя соглашает- 
ся: хорошо это или плохо, но именно таким образом браузеры работают сегодня и 
работали с самого начала существования Всемирной паутины. 


Как упоминалось ранее, сегодняшние браузеры не имеют никаких претензий к лю- 
бой мешанине поддерживаемых возможностей. Например, можно создать ХНТМГ- 
страницу по самому последнему слову этой технологии, а потом добавить в нее 
такой ужасно устаревший элемент, как <тагаџее> (используемый для создания 
"бегущей строки"), и ни один из браузеров не будет жаловаться на такую страницу. 
Также существуют и дыры в поддержке браузерами даже самых старых стандартов. 
Например, разработчики браузеров начали внедрять спецификацию С553, прежде 
чем была прекращена поддержка спецификации С552, и многие возможности С552 
были потом заброшены. И есть немалая ирония в том, что как только НТМЕ всту- 
пает в новую, инновационную эпоху, он возвращается на круги своя — к своим ис- 
токам. 


СовеТ 


С текущим, продолжающимся развиваться, черновым вариантом стандарта НТМЕ, 
включающим материал, который называется НТМІ5, а также небольшой, но постоян- 
но развивающийся набор новых, неподдерживаемых возможностей, можно ознако- 
миться на сайте ћҺїр:/^мһаїмо.огд/һті. А последние, менее формальные новости по 
НТМІ можно узнать в блоге группы \\/НАТМ/С по адресу ћіїр://Ыод.мћһаїмд.огд. 


Три основных принципа НТМІ_5 


Итак, вам, наверное, уже не терпится начать работать над настоящей страницей 
НТМІ5. Но прежде чем приступить к этому, сначала полезно заглянуть в мысли 
создателей НТМГ5. Понимая философию, на которой зиждется этот язык, вам бу- 
дет намного легче вникать в странности, сложности и разбираться со случайными 
трудностями, с которыми вы столкнетесь в этой книге. 


Принцип 1. Не рвити Паутину 


Требование "Не рвать Паутину" означает, что стандарт не должен вносить измене- 
ния, которые сделают нерабочими веб-страницы других разработчиков. Но такое 
случается редко. 


"Не рвать Паутину" также означает, что стандарт не должен мимоходом изменять 
правила и считать устаревшими совершенно нормальные современные веб- 
страницы (если они продолжают работать). Например, ХНТМЕ 2 порвал Паутину, 
т. к. требовал немедленно коренным образом изменить подход к написанию веб- 
страниц. Да, благодаря встроенной в браузеры поддержке обратной совместимости 
старые страницы продолжали бы работать. Но чтобы подготовиться к будущему и 
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поддерживать свою веб-страницу, разработчикам потребовалось бы затратить мно- 
жество часов, исправляя запрещенные в ХНТМІ 2 "ошибки". 


В НТМІ5 совсем другая философия. Все, что было правильным до НТМГ5, оста- 
ется правильным и в НТМІ5. Таким образом, все, что было правильным в 
НТМЕ 4.01, остается правильным в НТМГ5. 


ПРИМЕЧАНИЕ 


В отличие от предыдущих стандартов, в НТМЕ5 не просто указывается разработчикам 
браузеров, что им поддерживать, но также документируется и формализуется способ 
их работы, которого они уже придерживаются. Так как в стандарте НТМЕ5 документи- 
руется действительность, а не просто предписывается куча идеальных правил, он 
может стать наиболее поддерживаемым веб-стандартом, который когда-либо сущест- 
вовал. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Как НТМІ 5 обрабатывает устаревшие элементы 


Поддержка в НТМЕ5 всех соглашений НТМІ означает, что он поддерживает многие 
возможности, которые в настоящее время считаются устаревшими. В число этих воз- 
можностей входят такие элементы форматирования, как <Ғопё>, ненавидимые многи- 
ми элементы для создания специальных эффектов, такие как <р1іпк> и <тагаџее>, а 
также громоздкая система НТМЁЕ-фреймов. 


Такая непредвзятость вводит в замешательство многих начинающих изучать НТМІ5. 
С одной стороны, в НТМЕ5 с полным правом должны быть запрещены все эти уста- 
ревшие элементы, которые в течение многих лет не упоминались в официальных спе- 
цификациях. Но с другой стороны, современные браузеры без лишнего шума продол- 
жают поддерживать эти элементы, а НТМЕ5 должен отражать, как в действительности 
работают веб-браузеры. Что же стандарту остается делать? 


Эта проблема решается путем разделения спецификации НТМІ5 на две отдельные 
части. Первая часть, которая рассматривается в этой книге, предназначена для веб- 
разработчиков. Им нужно избегать неряшливых привычек и устаревших элементов. 
Проверить следование требованиям этой части стандарта НТМІ5 можно с помощью 
валидатора НТМІ5. 


А вторая часть (намного объемнее первой) предназначена для разработчиков веб- 
браузеров. Им нужно поддерживать все, что когда-либо существовало в НТМЕ, с тем, 
чтобы обеспечить своим браузерам обратную совместимость. 


В идеальном случае, стандарт НТМЕ5 должен содержать достаточно информации, по- 
зволяющей кому угодно создать браузер с чистого листа и обеспечить его полную со- 
вместимость с современными браузерами независимо от типа обрабатываемой им 
разметки — старой или новой. В этой части стандарта указывается, как браузеры 
должны обрабатывать устаревшие элементы, употребление которых официально не 
советуется, но которые продолжают поддерживаться. 


Кстати, спецификация НТМЕ5 также формализует способ обработки браузерами раз- 
нообразных ошибок (например, отсутствующие или несовпадающие теги). Это важный 
аспект, т.к. таким образом обеспечивается единообразная обработка дефектной 
страницы разными браузерами, даже в случае таких тонких проблем, как способ соз- 
дания модели страницы в системе ром! (дерево объектов в памяти, представляющее 
страницу, доступную коду Чауа$спру. Для создания этой объемной, трудоемкой части 


1 роситепі ОБесЕ Моде] — объектная модель документа. 
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стандарта создатели НТМЕ5 провели всеохватывающее тестирование на современ- 
ных браузерах, чтобы выяснить их незадокументированное поведение при обработке 
ошибок. Наконец, они изложили все это на бумаге. 


Принцип 2. Асфальтируйте тропинки 


Тропинка представляет собой неровный, протоптанный путь, позволяющий людям 
добраться из одной точки в другую. Тропинки существуют, т. к. они используются. 
Тропинка может быть не лучшим путем, но на определенном этапе она является 
самым практическим работающим решением. 


Стандарт НТМІ5 задается целью стандартизировать эти неофициальные, но широ- 
ко применяемые, методы. Возможно, результат этого подхода не будет таким акку- 
ратным, как прокладка новой заасфальтированной дороги с применением послед- 
них технологий, но у него больше шансов на успех. Причина кроется в том обстоя- 
тельстве, что переход к использованию новых методов может оказаться не под силу 
или не представлять интереса для веб-разработчика среднего уровня. Что еще хуже, 
новые методы могут не работать в старых браузерах, которыми пользуются посети- 
тели веб-страницы. Стандарт ХНТМІ 2 пытался заставить людей не пользоваться 
тропинками, но потерпел в этом предприятии сокрушающее поражение. 


ПРИМЕЧАНИЕ 


Асфальтирование тропинок несет очевидную выгоду: в нем используются упрочив- 
шиеся методы, уже поддерживающиеся браузерами на некотором уровне. Веб- 
разработчики в любое время отдадут предпочтение неряшливому практическому ре- 
шению, которое всегда работает на всех браузерах, обеспечивая тем самим более 
обширную аудиторию, чем искусно разработанной новой возможности, работающей 
лишь на 70% браузеров. 


Но подход с асфальтированием тропинок также требует определенных компромис- 
сов. Иногда это означает признание широко поддерживаемой, но плохо разрабо- 
танной возможности. Одним из примеров этому может служить операция гар апі 
Ягор (перетащить и бросить) (см. разд. "Чтение файла изображения" главы 9), ко- 
торая полностью основана на поведении, созданном компанией Місгоѕоћ для сво- 
его браузера ГЕ 5. Хотя в настоящее время возможность "перетащить и бросить" 
поддерживается во всех браузерах, ее ненавидят все разработчики из-за ее громозд- 
кости и большой сложности. Поддержка этой возможности в НТМГ5 вызвала у не- 
которых веб-разработчиков жалобы на то, что "НТМІ5 не только поддерживает 
плохие свойства, но и устанавливает стандарт для них". 


Принцип 3. Будьте практичными 


Это простой принцип: все изменения должны служить практической цели. И чем 
более трудоемкое изменение, тем большей должна быть ожидаемая от нее отдача. 
Веб-разработчикам могут быть больше по душе тщательно разработанные, едино- 
образные стандарты без странностей, но это недостаточно веская причина, чтобы 
менять язык, на котором уже создано несколько миллиардов документов. Конечно 
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же, кто-то должен еще решить, чьи интересы являются более важными. Для реше- 
ния этого вопроса хорошо бы посмотреть, что веб-страницы уже делают или пыта- 
ются делать. 


Например, третьим самым популярным веб-сайтом в мире (на момент написания 
этой книги) был сайт УойТифе. Но так как до НТМІ5 в НТМІ. не было настоящих 
возможностей поддержки видео, то в своей работе создателям этого сайта при- 
шлось использовать подключаемый к браузеру Е1аѕћ-модуль. Это решение работает 
на удивление хорошо, т.к. такой Е!азВ-модуль установлен, как правило, на всех 
подключенных к Интернету компьютерах. Но иногда случаются исключения из 
этого правила: на корпоративных компьютерах может быть запрещена установка 
Н1аѕһ-модуля, а устройства АрріІе (такие как 1РВопе или 1Рад) вообще не поддержи- 
вают его. И несмотря на то, на скольких компьютерах может быть установлен 
Н1аѕһ-модуль, есть хорошее основание для расширения стандарта НТМГ, чтобы он 
поддерживал напрямую одно из самых распространенных применений веб- 
страниц — просмотр видео. 


Подобным образом мотивируется стремление добавить к НТМГ.5 дополнительную 
поддержку метода "перетащить и бросить" для интерактивных элементов, редакти- 
руемого НТМГ-содержимого, рисования на двумерном холсте и т. п. Не нужно да- 
леко ходить, чтобы найти веб-страницы, в которых все эти возможности применя- 
ются уже сейчас. В одних это делается с помощью подключаемых модулей типа 
АаођБе Еаѕһ или Мпсгозой ЗПуегИ ть, а в других — с помощью библиотек ЈауаЅсгірі 
или (что более трудоемко) посредством специально созданных страниц Јауа$сгірі. 
Почему же тогда не добавить в стандарт НТМІ официальную поддержку этих воз- 
можностей и не обеспечить их единообразную работу на всех браузерах? 


ПРИМЕЧАНИЕ 


Подключаемые модули типа Еіаѕћ не исчезнут в одночасье (или даже в течение не- 
скольких лет). Несмотря на многие инновации, создание сложных графических прило- 
жений в НТМІ5 требует намного больше работы, чем использование для этих це- 
лей подключаемых модулей (см., например, игры для браузеров на сайте 
млилм.НазПагсаде.сот). Но конечная цель стандарта НТМІ5 ясна: позволить веб- 
сайтам предоставлять видео, развитую интерактивность, а также кучу разных других 
примочек, не прибегая к помощи подключаемых модулей. 


Первое знакомство с разметкой НТМЕ5 


Рассмотрим один из простейших документов НТМГ5$. Он начинается с указания 
типа документа с помощью специального кода описания типа документа (значение 
этого кода объясняется в следующем разделе), после чего дается название докумен- 
та, а потом идет его содержимое. В данном случае содержимое состоит из одного 
абзаца текста. 


<!РОСТУРЕ Һёт1> 
<Е1Е1е>А Тіпу НТМЬ Рросотепі</ёіё1е> 
<р>1Іеі'ѕ госк Бе ргоиѕег, НТМІ5 зёу1е.</р> 
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Или, что то же самое!: 


<!РОСТУРЕ һёті> 
<Е1(1е>Крошечный документ НТМГ</&11е> 


<р>Дадим встряску браузеру в стиле НТМІ5.</р> 


Результат обработки этого документа браузером показан на рис. 1.1. 


АгеРох ~ 


[Е А Тіпу НТМЕ Ооситепё | + | 


<) /Сһарѓег01/ЅирегЅітрієНТМІ5.Һті > © || № 3: 


Геїѕ госк ће Бгозузег, НТМІ 5 ѕўуіе. 


Рис. 1.1. Отображение простейшего НТМЕ5 документа в браузере 


Этот насколько простой документ можно упростить еще больше. Например, конеч- 
ный тег </р> вообще-то не является обязательным в стандарте НТМГ5, т. к. брау- 
зеры знают, как закрывать все открытые элементы в конце документа (а стандарт 
НТМГ5 узаконивает это поведение). Но подобное срезание углов вместо упроще- 
ния делает разметку более сложной для понимания и может вызвать неожиданные 
ошибки. 


Стандарт НТМІ5 также разрешает удалить элемент <Е1е1е>, если информация 
о названии страницы предоставляется посредством какого-либо другого механизма. 
Например, при отправлении НТМГ-документа в сообщении электронной почты его 
название можно вставить в поле Тема сообщения, а остальной код разметки — тип 
документа и содержимое — поместить в поле для сообщения. Но это, очевидно, 
особый случай. 


Далее нам захочется облечь плотью этот скелетистый НТМЕ5-документ. Большин- 
ство веб-разработчиков придерживается мнения, что использование традиционных 
разделов <Ъеаа> И <роду> полезно для облегчения восприятия документа, т. к. они 
четко разделяют информацию о странице (заголовок страницы) и само содержимое 
(основная часть страницы). Такая структура особенно полезна, когда к странице 
добавляются сценарии, таблицы стилей и метаэлементы, как показано в следующем 
листинге: 


<!РОСТУРЕ Һітмі> 
<Һеаа> 

<ііб1Іе>Крошечный документ НТМІ</біё1е> 
</Һеаа> 
<Боау> 

<р>Дадим встряску браузеру в стиле НТМІ5.</р> 
</Боау> 


' Иногда фрагменты кода будут представлены на русском языке. — Ред. 
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Как всегда, отступ (в данном случае в начале третьей и шестой линий кода) являет- 
ся абсолютно необязательным. В этом примере отступ используется с целью облег- 
чить понимание структуры страницы с первого взгляда. 


Наконец, весь документ (за исключением строки досёуре) можно облачить в тради- 
ЦИОННЫЙ элемент <һіт1>, как показано в следующем листинге: 


<!РОСТУРЕ Һёт1> 
<Һіт1> 
<Һеаа> 
<ііб1е>Крошечный документ НТМІ</біЁ1е> 
</Һћеаа> 
<роау> 
<р>Дадим встряску браузеру в стиле НТМІ5.</р> 
</роау> 
</Һ1> 


Вплоть до НТМІ5 в каждой версии официальной спецификации НТМІ. требова- 
лось использование элемента <һеті>, несмотря на то, что наличие этого элемента 
никаким образом не влияет на обработку браузером остального кода страницы. 
В НТМГ5 использование этого элемента оставлено полностью на личное усмотре- 
ние разработчика. 


ПРИМЕЧАНИЕ 


Использование элементов <ћіт1>, <ћһеаа> и <роду> является просто вопросом стиля. 
Страница без этих элементов будет работать отличнейшим образом даже на старых 
браузерах, которые и слыхом не слыхивали ни о каком НТМЕ5. Практически, браузер 
автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на 
модель ООМ (набор программных объектов, представляющих страницу) страницы 
с помощью сценария Јауа$сгірі, она будет содержать объекты для элементов <ћет1>, 
<һеаа> и <роду>, даже если разработчик и не использовал их. 


На данном этапе этот пример страницы является чем-то средним между самым 
простым НТМІ5-документом и расширенной отправной точкой практической веб- 
страницы НТМГ5. В последующих разделах мы добавим к нему остальные необхо- 
димые элементы и копнем глубже в разметку. 


Описание типа документа НТМЕ5 


В первой строке каждого НТМЕ5-документа всегда дается описание типа доку- 
мента. Это описание ясно указывает, что далее следует НТМГ5-содержимое, и вы- 
глядит следующим образом: 


<!РОСТУРЕ Һёт1> 


Первое, что бросается в глаза в описании типа документа НТМГ5, — это его пора- 
зительная простота. Сравните его, например, с неуклюжим описанием типа доку- 
мента, который требуется использовать веб-разработчикам при работе со строгим 
ХНТМЕ 1.0: 


<!РОСТУРЕ Вет РОВЬТС "-//МЗС//РТЬ ХНТМЬ 1.0 $Ех1сЕ//ЕМ" 
"Евр: / /ут. 3. орд/ ТК/хҺіт11/рТр/хһіт11-5 гісі .аёа"> 
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Даже профессиональные веб-разработчики были вынуждены вставлять описа- 
ние типа документа ХНТМГ, методом копирования и вставки из другого докумен- 
та. А описание типа документа НТМГ5 короткое, четкое и легко вводится вруч- 
ную. 

Описание типа документа НТМІ5 также примечательно тем, что оно не содержит 
номера официальной версии НТМГ, (5 для НТМІ5). В нем просто указывается, что 
страница является НТМГ-страницей. Это соответствует новой концепции НТМГ5, 
как живого языка. Добавленные в НТМІ новые возможности автоматически дос- 
тупны для размещения на странице, не требуя для этого изменений в описании типа 
документа. 


Все это порождает непростой вопрос: если НТМІ5 — живой язык, то зачем тогда 
для страницы вообще нужно описание типа документа? 


Ответ на этот вопрос таков: описание типа документа продолжает использоваться 
по историческим причинам. При обработке страницы с отсутствующим описанием 
типа документа большинство браузеров (включая Іпѓегпеї Ехрогег и Еігеѓох) пере- 
ходят в режим совместимости (дайКз тоде). В этом режиме они пытаются ото- 
бразить страницу с учетом ошибок в правилах, которые использовались в более 
ранних версиях. Проблема с этим состоит в том, что режим совместимости одного 
браузера может отличаться от режима совместимости другого браузера, вследствие 
чего страницы, разработанные для одного браузера, на другом браузере будут, ско- 
рее всего, отображаться с ошибками, такими как неправильный размер шрифта, 
нарушенная структура оформления и т. п. 


А обнаружив на странице описание типа документа, браузер знает, что обработку 
этой страницы требуется выполнять, следуя более строгим правилам режима 
стандартов (ѕќапдагӣѕ то4е), который обеспечивает единообразное форматирова- 
ние и структуру страницы при ее отображении любым современным браузером. За 
некоторыми исключениями, браузеру совершенно безразлично, какой именно тип 
документа указан в описании. Он просто проверяет, что страница имеет какое-либо 
описание типа документа. Описание типа документа НТМГ.5 просто самое корот- 
кое действительное описание типа документа, которое задействует режим стандар- 
тов браузера. 


СовеТ 


Описание типа документа НТМЕ5 задействует режим стандартов во всех браузерах, 
имеющих этот режим, включая браузеры, которые ничего не ведают об НТМЬЕ5. По- 
этому вы можете начать использовать описание типа документа НТМІ5 прямо сейчас 
во всех создаваемых вами страницах, даже если вы вынуждены отложить использо- 
вание многих возможностей НТМЕ5 с меньшим уровнем поддержки. 


Хотя описание типа документа в первую очередь предназначено для указания веб- 
браузерам, какой режим обработки страниц использовать, другие агенты могут 
также проверять его. В число этих агентов входят НТМГ5-валидаторы, поисковые 
движки, инструменты разработки, а также иные разработчики (когда они пытаются 
вычислить тип разметки, используемый данной страницей). 
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Кодировка символов 


Кодировка — это стандарт, указывающий компьютеру, каким образом преобразо- 
вывать текст в последовательность байтов при записи текста в файл (а также, как 
выполнять обратное преобразование при открытии файла). По историческим при- 
чинам в мире существует множество разных кодировок. В настоящее время прак- 
тически на всех веб-сайтах используется компактная и быстрая кодировка ОТЕ-8, 
поддерживающая все символы других алфавитов, которые вам когда-либо могут 
потребоваться. 


Веб-серверы часто настраивают, чтобы сообщать посещающим их браузерам, что 
предлагаемые сервером страницы имеют определенную кодировку. Но нельзя быть 
уверенным, что веб-сервер, на котором вы планируете разместить свой веб-сайт, 
будет настроен таким образом (если только это не ваш собственный сервер). Кроме 
этого, попытка браузера в таком случае предположить наиболее вероятную исполь- 
зуемую кодировку может претерпеть неудачу по причине какого-либо малоизвест- 
ного вопроса безопасности. По этим причинам всегда следует вставлять информа- 
цию об используемой кодировке в разметку страницы. 


НТМГ5 делает эту задачу легкой. Для этого нужно лишь вставить элемент <теба> 
в самом начале блока <Ъеаа> (или, если элемент <һеаа> не используется, сразу же 
после кода описания типа документа). Вот пример использования элемента <теѓа>: 


<Һеаа> 
<тефа сһагѕеі="оіғ-8"> 
<ііб1е>Крошечный документ НТМІ</біЁ1е> 
</ћеаа> 


Инструменты для веб-разработки, такие как Югеатуеауег или Ехргеѕѕіоп Ме, 
вставляют этот элемент автоматически при создании страницы. Эти инструменты 
также обеспечивают сохранение файлов в кодировке ОТЕ. Но при создании веб- 
страницы с помощью обычного текстового редактора, чтобы обеспечить сохране- 
ние файлов в правильной кодировке, может потребоваться выполнить дополни- 
тельные шаги. Например, НТМГ-файл, редактируемый с помощью программы 
Блокнот (в М№іпаоуѕ), нужно сохранять посредством команды Сохранить как и 
при этом выбрать кодировку ОТЕ-8 в раскрывающемся списке Кодировка внизу 
диалогового окна. А в текстовом редакторе ТехіЕан (в Мас ОЗ) сначала нужно вы- 
брать Формат | Обычный текст, а потом в раскрывающемся списке Кодировка 
обычного текста диалогового окна Сохранить как выбрать опцию Ошсоде (ОТЕ-8). 


Язык 


Считается хорошим тоном указывать естественный язык веб-страницы. Эта ин- 
формация может быть иногда полезной для других, например, поисковые движки 
могут использовать ее для фильтрации результатов поиска, чтобы возвратить толь- 
ко страницы на указанном языке. 


Чтобы указать язык для какого-либо содержимого, используется атрибут Тапа 
в любом элементе разметки с заданием кода требуемого языка. Код для русского 
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языка — ги, а для английского — еп. Коды для других языков можно узнать на сай- 
те В р://реоре.м3.ог?/1$ а/я 5/5 и а55. 


Вставить в веб-страницу информацию о языке легче всего через элемент <һћёт1>: 


<ҺЕпі 1апа="еп"> 


Информация о языке также может быть полезной, если страница содержит текст на 
разных языках, который нужно прочитать с помощью программы чтения экранного 
текста. В таком случае атрибут Тапа с кодом соответствующего языка вставляется 
в нужном месте документа, например, в элементы <аіу>, охватывающие текст на 
разных языках. Таким образом, программа чтения экранного текста способна опре- 
делить, какой текст она может читать. 


Добавление таблицы стилей 


Практически в каждой странице должным образом разработанного профессиональ- 
ного веб-сайта используются таблицы стилей. Для указания требуемой таблицы 
стилей используется элемент <1іпк> в блоке <һеаа> документа НТМТ.5: 


<Һеаа> 
<пефа сһагѕеі="обғ-8"> 
<Е1Е1е>Крошечный документ НТМТ</&11е> 
<1іпк ЬгеЕ="56у1ез.сз5" ге1="ѕіуІеѕһееі"> 
</Һћеаа> 


Этот способ похож на указание таблиц стилей в традиционных НТМГ-документах, 
но немного проще. Так как существует единственный язык каскадных таблиц сти- 
лей — С88, то в добавление атрибута +уре="+ехе/сзз", который требовался ранее, 
больше нет надобности. 


Добавление Чауа5 с" р{-кода 


Язык сценариев ЈауаЅсгірі изначально создавался как средство для трудоемкого 
способа придания блеска и обаяния скучным веб-страницам. В настоящее время 
основная область применения Јауа$сгірї сместилась с разработки прибамбасов ин- 
терфейса на разработку нестандартных веб-приложений, включая сверхэффектив- 
ных клиентов электронной почты, текстовых редакторов и картографических 
движков, которые исполняются непосредственно в браузере. 


Код ЈауаЅсгірі вставляется в документ НТМІ5 по большому счету таким же спосо- 
бом, как и в традиционную НТМГ-страницу. В следующем листинге приводится 
пример вставки в веб-документ кода Јауа$сгірі по ссылке на внешний файл: 


<Һеаа> 
<пефа срахзеф="аеЕ-8"> 
<Е1Е1е>Крошечный документ НТМІ</біЁ1е> 
<ѕсгірі згс="ѕсгірёѕ.јѕ"></ѕсгірі> 
</ћеаа> 
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Атрибут Іапсџаде="ЈауаЅсгірі" не является обязательным, т. к. если не указан ка- 
кой-либо другой язык сценариев (а поскольку Лауабспире — единственный широко- 
поддерживаемый язык сценариев для НТМГ, то вероятность такого развития ни- 
чтожно мала), браузеры автоматически предполагают, что используется Јауа8сгірі. 
Но даже ссылаясь на внешний файл с кодом ЈауаЅстірі, все равно нужно помнить 
о закрывающем теге </ѕсгірі>. Если упустить этот тег по недосмотру или при по- 
пытке укоротить код, используя синтаксис пустых элементов, то страница не будет 
работать должным образом. 


Если вы уделяете много времени тестированию своих страниц с ЈауаЅсгірї в Пщегпе! 
Ехр|огег, может быть полезным добавление метки МОТ\У/ (МагК оЁ ће №еб, метка 
особенности сети) в блок <ћеаа> сразу же после строки кодировки. Делается это 
таким образом: 


<реаа> 
<пеба сһагѕеі="оЕғ-8"> 
<!-- ѕауеа Егом иг1= (0014) ароџё:іпёегпеё --> 


<Е1Е1е>Крошечный документ НТМІ</біЁ1е> 
<зсгірі згс="зсг1рЕ$.)3"></зск1реЕ> 
</ћеаа> 


Эта строка кода указывает Іпіегпеѓ ЕхрІогег обрабатывать страницу таким образом, 
как будто бы она была загружена с удаленного веб-сайта. В противном случае ІЕ 
переключается в особый режим блокировки, выводит предупреждение безопасно- 
сти в строке сообщений и отказывается исполнять любой код Јауа$сгірї до тех пор, 
пока вы не нажмете кнопку Разрешить заблокированное содержимое. 


Все другие браузеры не обращают внимания на метку МОТУ и используют одни и 
те же настройки безопасности как для страниц, загружаемых с удаленных веб- 
сайтов, так и для локальных файлов НТМІ. 


Конечный результат 


Если вы выполнили все вышеизложенные шаги, созданный вами документ НТМІ5 
должен выглядеть подобным образом: 


<!РОСТУРЕ Һһіт1> 
<ҺЕпі 1апа="еп"> 
<Һеаа> 
<пефа срахзее="аеЕ-8"> 


<Е161е>Крошечный документ НТМІ</біЁ1е> 


<1іпк БгеЕ="56у1ез.с$5" ге1="ѕіу1Іеѕһееё"> 
<ѕсгірі згс="зсгіріѕ.јѕ"></ѕсгірі> 
</ћеаа> 


<роау> 

<р>Дадим встряску браузеру в стиле НТМІ5.</р> 
</роду> 
</ћт1> 
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Пусть это больше не самый короткий документ НТМГ5, зато неплохая отправная 
точка для создания любой веб-страницы. И хотя этот пример может показаться 
тошнотворно скучным, не переживайте по этому поводу, т. к. в следующей главе 
мы повысим уровень наших разметок до практических страниц, полных тщательно 
оформленного содержимого, отформатированного с помощью таблиц стилей. 


ПРИМЕЧАНИЕ 


Все элементы синтаксиса НТМІ5, рассмотренные в этом разделе — новое описание 
типа документа, метаэлемент кодировки, атрибут языка, таблицы стилей и ссылки на 
код Јауа$сгірї — работают как в новых, так и в старых браузерах. Это возможно бла- 
годаря тому, что они полагаются на настройки по умолчанию и встроенные схемы ис- 
правления ошибок, которые используются во всех браузерах. 


Углубленное знакомство с синтаксисом НТМЕ5 


Как вы уже узнали, в НТМІ5 некоторые правила были ослаблены. Это было сдела- 
но потому, что создатели НТМІ5 хотели, чтобы этот язык реальнее отражал дейст- 
вительную работу веб-браузеров. Иными словами, они хотели сократить разрыв 
между "работающими веб-страницами" и "веб-страницами, правильными с точки 
зрения стандарта". В следующем разделе мы рассмотрим изменения в правилах бо- 
лее подробно. 


ПРИМЕЧАНИЕ 


Конечно же, все еще существуют устаревшие методы, поддерживаемые браузерами, 
употребление которых абсолютно не одобряется стандартом НТМІ5. Эти методы 
можно обнаружить с помощью валидатора НТМІ5 (см. разд. "Проверка кода НТМІ 5" 
далее в этой главе). 


Ослабленные правила 


При нашем первом знакомстве с разметкой НТМІ5 мы узнали, что использование 
элементов <һёті>, <һеаа> И <роау> не является обязательным для этой разметки. Но 
ослабление правил в НТМІ5 на этом не заканчивается. 


В нем также разрешается использовать в тегах как прописные, так и строчные бук- 
вы, как в следующем примере: 


<Р>В тегах <ЕМ>можно использовать</еМ> как прописные, так и строчные 
буквы.</р>. 


Также можно не использовать закрывающую обратную косую черту в пустых эле- 
ментах, т. е. элементах без содержимого, таких как <іто> (изображение), «г> (раз- 
рыв строки) или <һг> (горизонтальная линия). Далее приведены три равнозначных 
способа вставить разрыв строки: 


Я не могуФұ /> 
двинуться ни вперед,<«Ьг> 
ни назад.<Фх/> 

Я застрял. 
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В НТМІ5 также подверглись изменениям правила для атрибутов. Значения атрибу- 
тов больше не требуется брать в кавычки, но только при условии, что они не со- 
держат запретных символов (обычно это символы >, = или пробел). Вот пример ис- 
пользования элемента <іто> таким образом: 


<19 а1Е="Туманность Конская голова" ѕгс=Ногѕеһеаа01.јро> 


Также разрешены атрибуты без значений. Таким образом, если для установки 
флажка в ХНТМЕ требуется несколько повторяющийся синтаксис: 
<1приЕ +буре="сһескрох" сһескей="сһескеа" /> 


то в НТМІ5 это можно делать в традициях НТМЕ 4.01, указывая только одно на- 
звание атрибута: 


<1праЕ ёуре="сһескрох" сһескеа> 


Но некоторых особенно беспокоит не то, что все это разрешено в НТМІ 5, а то, что 
не особенно последовательные разработчики могут небрежно использовать как 
строгие, так и ослабленные правила, иногда даже в одном и том же документе. Но в 
действительности подобная небрежная разметка возможна и в ХНТМГ. В обоих 
стандартах обязанность за хороший стиль разметки лежит на веб-разработчике, т. к. 
браузер скушает все, что ему будет подано. 


Далее дается краткое изложение основных принципов хорошего стиля создания 
разметки НТМІ5. Здесь же указываются соглашения, применяемые в примерах 
этой книги, даже если следование этим соглашениям не является обязательным. 


П Использование элементов <һёт1>, <Боду> И <ћеад>. В элементе <һеті> удобно 
размещать определение естественного языка страницы (см. разд. "Язык" ранее 
в этой главе), а элементы <веа4> И <ройу> позволяют отделить информацию 
о странице от собственно содержимого страницы. 


С Строчные буквы в тегах. Использование строчных букв в тегах не является обя- 
зательным, но такие теги намного больше распространены, их легче вводить 
(т. к. не требуется задействовать клавишу <5һ1#>), а также не так режут глаз, как 
теги с прописными буквами. 


О Взятие в кавычки значений атрибутов. Значения атрибутов берутся в кавычки 
потому, что на это есть причина — помочь избежать ошибок, которые в против- 
ном случае очень легко допустить. Без кавычек один неправильный символ зна- 
чения атрибута может испортить всю страницу. 


С другой стороны, существуют некоторые старые правила, которые в этой книге 
игнорируются (что также разрешается делать и вам). В примерах в этой книге пус- 
тые элементы не закрываются, т. к. при переходе на НТМІ5 большинство разра- 
ботчиков не утруждает себя добавлением лишней косой черты (/). Также нет при- 
чины использовать длинную форму атрибутов при одинаковом названии и значе- 
нии атрибута. 


Проверка кода НТМЕ5 


Новый расслабляющий подход к правилам в НТМІ5 может быть вполне по душе 
одним веб-разработчикам. Других же сама мысль о том, что за фасадом работаю- 
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щего без сучка, без задоринки браузера может скрываться непоследовательная, 
полная ошибок разметка, способна лишить сна. Если вы принадлежите ко второму 
типу, то знайте, что инструмент для проверки правильности разметки, называю- 
щийся валидатором, может обнаружить код, который не соответствует рекомен- 
дуемым стандартам НТМГ5, даже если браузер и глазом не моргнет при обработке 
этого кода. 


Некоторые ИЗ возможных проблем, которые валидатор в состоянии уловить, вклю- 
чают следующие: 


О отсутствие обязательных элементов (например, элемента <Е11е>); 
О отсутствие закрывающего тега; 
О неправильно внедренные теги; 


0 отсутствие атрибутов у тегов, для которых они обязательны (например, атрибута 
эхс тега <ітор); 


П неправильное расположение элементов или содержимого (например, текста 
в блоке <Һеаар>). 


Инструменты для разработки веб-страниц, такие как Пгеатууеауег и Ехргеѕѕіоп 
\еб, оснащены собственными валидаторами, но только самые последние версии 
поддерживают НТМГ5. В таком случае можно воспользоваться одним из онлайно- 
вых валидаторов. Далее даются инструкции по использованию популярного вали- 
датора от организации МЗС: 


1. Откройте в своем браузере страницу В р://уаНдаюг.мЗ.ог? (рис. 1.2). 


Валидатор предложит три способа проверки разметки, каждая на своей вкладке: 
УаНдае Бу ОКІ (для страницы, которая уже размещена в Паутине), УаНаме Бу 
ЕЙе Орюа4 (для страницы, сохраненной в файле на вашем компьютере) и 
УаНдае Бу Пес Іприї (для кода, вводимого или вставляемого в окно валида- 
тора). 


2. Выберите нужную вкладку и предоставьте свою НТМГ-разметку. 


е Для метода Уаһіаќе Бу ОВТ нужно ввести ОВГ, проверяемой страницы в поле 
Ааагеѕѕ (например, В р://уууу.Музюррузйе.сот/ЕамеаРазе.И т. 


® Для метода УаН4ае Бу Ее Оріоаа необходимо загрузить в валидатор тре- 
буемый файл с вашего компьютера. Для этого сначала нажмите кнопку 
Сһооѕе (Выберите файл) в поле Ее (в браузере Сһготе нажмите кнопку Вы- 
брать файл). В диалоговом окне Открыть выберите требуемый НТМГ-файл 
и нажмите кнопку Открыть. 


• Метод Уа|дае Бу Юігесі про позволяет проверить любой код, помещен- 
ный в поле Ещег Фе Магкир ёо уаНдае. Для этого метода легче всего будет 
скопировать код из текстового редактора и поместить его в поле для про- 
верки. 


Прежде чем приступить к проверке кода, можно щелкнуть по ссылке Моге 
ОрНоп$, чтобы изменить некоторые параметры, но это нежелательно. В част- 
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ности, будет лучше предоставить валидатору определить тип документа автома- 
тически. Таким образом валидатор использует описание типа документа, ука- 
занное в проверяемой веб-странице. Также лучше предоставить валидатору 
самому определить кодировку страницы, за исключением страниц с кодировкой, 
которую валидатор затрудняется определить. 


Тре \№\3С Мегкир Маһ... х \ 


« С © уаіаахогмз.огд/ма!їагіе бу іприс ад 4 


Магкир “аіідаіоп Зегмсе 
М2 = 


ћеск тле тагкир (НТМІ., ХНТМІ ої Үео доситеп!я 


Уаідаїќе Бу УР! Ма|Чае Бу Р!е Џріоаа Уа!ідаїе Бу д 


Уа1ідаѓе Бу дігесї іприї 


| Епѓег ће Маг 
<:00СТҮРЕ 
<СА1 +, 
<пеаа» | 
«леса сћһа. 8*> 
<1іпк Вге Е] 5 сэз" ге1-"зъу1езъеес"> 
<3сгіро згс="зсгірьз.јз”">»</зсгірс> 
</еай> 


<ройу> 

<руВе сагеЁџі пот го суех1ар певебу пезгей еїепепоз, <зъгопдуосг е13е'</р></зъгога> 
<"Боау> 
<> 


› Моге Ор{оп$ 


Сһеск 


мандат 3 ого/уа ге бу 1приї - 


Рис. 1.2. Веб-сайт Һір://маіідаїог.м3.огд позволяет выполнить проверку разметки НТМЕ 
тремя разными способами 


3. Нажмите кнопку Сһеск. 


Ваш код будет отправлен на проверку, и после короткого ожидания в браузере 
будет выведен отчет с результатами валидации. Если код не прошел проверку, 
то в отчете будут указаны выявленные валидатором ошибки (рис. 1.3). 


ПРИМЕЧАНИЕ 


Даже для полностью правильного НТМ!-документа в отчете может быть указано не- 
сколько предупреждений (хотя полностью безобидных), включая такие, что кодировка 
была определена автоматически и услуга валидации кода НТМІ5 является экспери- 
ментальной и не совсем доведенной до логического конца. 


Как можно видеть на рис. 1.3, валидатор выявил в документе четыре нарушения 
правил НТМІ5, являющиеся результатом двух ошибок в коде. Первая ошибка — 
отсутствует обязательный элемент <=11е>. Вторая — элемент <р> закрывается до 
закрытия вложенного в него элемента <ѕегопо>. Чтобы исправить эту ошибку, нуж- 
но вместо последовательности элементов </р></зЕхопа> использовать последова- 
тельность </зЕхопа> </р>. Тем не менее, несмотря на эти ошибки, эта разметка пра- 
вильная, и все браузеры будут отображать эту страницу должным образом. 
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| па Магир Майдан... 5 
є С © хаііааїоглмуЗ.огд/сһеск = & 


Уа!іааїоп ОцёриЕ: 4 Еггог$ 


Ө пе т, СоІитп 7: Еетег\ һеаа іѕ тіѕѕіпо а гедиігеа іпзќапсе оѓ сНИа еіетепќ йе. 


</һеаа> 


Сопїепі тое! їог еіетепі һега: 


© пе 10, СоІитп 75: Епа {ад р ѕееп, биќ еге меге ореп еіетепіѕ. 


Ве сагеѓғџ1 пос со оуег1ар пеагру пезсей е1ещепоз, <зсгопс>ог е1зе!</р> </зсгопо> 


Ө пе 10, СоІитп 63: Чпсіоѕеа еіетепї з\гопд. 


Г 


„Ве сагеѓџі пос со оуег1ар пеагру пезсей еїепепсз, <зсгопд> ог е1зе!</р></зтгопа> 


©Ә пе 10, Соштпт 84: №о еіетепї ѕїгопд {о союзе. 


„Ве сагеѓғџі пос со оуег1ар пеагру пезсей еїіешепсз, <зсгопсд>ог еїзе!</р></зсгопд> 


Рис. 1.3. Отчет с результатами проверки 


Возвращение ХНТМЕ 


Как мы уже узнали, восхождение спецификации НТМТ.5 знаменует, по идее, закат 
предыдущего короля Всемирной паутины — стандарта ХНТМГ. Но действитель- 
ность не так проста, и поклонникам ХНТМІ не нужно отказываться ни от чего, что 
им мило в языках разметки предыдущего поколения. 


Прежде всего, вспомним, что синтаксис ХНТМІ. продолжает существовать. Нала- 
гаемые ХНТМІ. правила либо продолжают использоваться в качестве руководящих 
принципов (например, правила правильного вложения элементов), либо поддержи- 
ваются в виде необязательных соглашений (например, соглашение об использова- 
нии закрывающей косой черты с пустыми элементами). 


Но что если вы хотите сделать следование правилам ХНТМГ-синтаксиса обяза- 
тельным? Возможно, вы беспокоитесь, что вы (или ваши коллеги по работе) не- 
осознанно потихоньку впадете в использование ослабленных соглашений обычного 
НТМЕ. Чтобы не допустить этого, вам нужно использовать ХНТМГ5; это менее 
распространенный стандарт, который, по сути, является НТМІ5, облаченным в ог- 
раничения, основанные на ХМГ. 


Чтобы сделать документ НТМІ5 документом ХНТМГ, нужно явно указывать про- 
странство имен ХНТМЕ в элементе <һеті>, закрывать каждый элемент, обязательно 
использовать строчные буквы в тегах и т.д. В следующем листинге приводится 
пример кода, в котором выполнены все эти требования: 
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<!РОСТУРЕ Һһітм1> 
<ВЕ1 1апа="ер" хи1аз$="Ь р: //мии.м3З-ога/1999/хЬет1"> 
<ћһеаа> 

<пеёа сһагѕеё="об#-8"/> 

<ііб1е>Крошечный документ НТМІ</біё1е> 


<1іпк ҺгеЁ="ѕіуІеѕ.сѕз" ге1="зіу1еѕһееі"/> 
<ѕсгірё ѕзгс="зсгірёѕ.јѕ"></ѕсгірі> 
</ћеаа> 


<роау> 

<р>Дадим встряску браузеру в стиле ХНТМІ5.</р> 
</роду> 
</ћт1> 


Для проверки этого кода требуется валидатор ХНТМГ, который контролирует сле- 
дование строгим старым правилам ХНТМГ. Валидатор от \\ЗС для этого не подой- 
дет, но зато подойдет валидатор на сайте ћќєр://уаіаќёог.пи, где нужно указать 
требуемый стандарт (т. е. ХНТМІ) в раскрывающемся списке Ргеѕеѓ. Также нужно 
установить флажок Ве Јах або НТТР Сощеп{-Туре, если только вы не вставляете 
проверяемый код непосредственно в текстовое поле. 


Следуя этим шагам, вы сможете создать документ ХНТМЕ и выполнить его про- 
верку. Тем не менее браузеры все равно будут обрабатывать этот документ, как 
обычную страницу НТМГ5, которая просто пыжится походить на ХМГ-документ. 
Никаких дополнительных правил при обработке такой страницы применять они не 
будут. 


Если же вы хотите, чтобы и браузеры обрабатывали страницу согласно прави- 
лам ХНТМІ, то вам нужно настроить свой веб-сервер для подачи страниц с 
МІМЕ -типом арр1ісаёіоп/хһім1+хті ИЛИ арр1ісабіоп/хтіІ, вместо стандартного типа 
бехі/һет. (Краткую информацию о МІМЕ-типах см. во врезке "На профессио- 
нальном уровне. Основные сведения о МІМЕ-типах" главы 5.) Но прежде чем 
звонить администратору вашего веб-хостинга и давать ему эти инструкции, имейте 
в виду, что с этими настройками ваша страница не будет отображаться во всех вер- 
сиях Іпѓегпеї Ехрогег более ранних, чем ГЕ 9. По этой причине настоящий ХНТМЕ 
является невыполнимым условием при заключении сделки веб-страницы с брау- 
зером. 


Кстати, браузеры, поддерживающие ХНТМГ5, обрабатывают такую разметку по- 
другому, чем обычный код НТМІ5. Они пытаются обрабатывать страницу как до- 
кумент ХМГ, и если это им не удается (по причине ошибки в коде), браузер пре- 
кращает обработку оставшейся части документа. 


Какой из этого следует вывод? Для подавляющего большинства веб-разработчиков, 
от любителей до серьезных профессионалов, игра по строгим правилам ХНТМЕ 
не стоит требуемых для этого свеч. Единственным исключением является разра- 
ботка специальных решений, например страниц с содержимым, которым нужно 
манипулировать посредством ХМГ-инструментов, таких как, например, ХОчегу и 
ХРа. 
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Если вам интересно, можно обмануть браузер и заставить его переключиться в режим 
ХНТМЕ. Для этого нужно лишь переименовать файл с расширением хп! или хП а 
потом открыть его с жесткого диска вашего компьютера. Большинство браузеров 
(включая Ргегох, Сһготе и ІЕ 9) будут обрабатывать такую страницу, как будто бы она 
была загружена с веб-сервера с настройками МІМЕ ХМЕ. Если страница содержит 
любую незначительную ошибку, в браузере отобразится частично обработанная стра- 
ница (ІЕ 9), сообщение об ошибке ХМЕ (Еігеѓох) или то и другое вместе (Сһготе). 


Семейство элементов НТМІ 5 


Все это время мы рассматривали изменения в синтаксисе НТМГ5. Но более важ- 
ными являются добавления, удаления и изменения поддерживаемых в НТМІ эле- 
ментов. В последующих разделах мы вкратце рассмотрим эти аспекты. 


Добавленные элементы 


В следующих главах в основном внимание уделяется изучению новых элементов, 
предоставляющих веб-страницам возможности, которые отсутствовали до настоя- 
щего времени. Эти элементы, с кратким описанием и указанием главы, в которой 
они рассматриваются, перечислены в табл. 1.1. 


Категория 


Семантические эле- 
менты для работы со 
структурой страниц 


Таблица 1.1. Новые элементы НТМІ5 


Элементы 


<агііс1е>, <азлае>, <Ғісдсарііоп>, <Ғісиге>, 
<Ғообег>, <«ћеадег>, <һдгоиџр>, <пау>, 
<ѕесііоп>, <4ефа11$>, <ѕоитагу> 


Где 
рассматривается 


Глава 2 


Семантические эле- 
менты для работы 
с текстом 


<пагк>, <єіте>, <ког> (поддерживался и ранее, 
но теперь официально является частью языка) 


Глава 3 


Элементы для рабо- 
ты с веб-формами и 
интерактивности 


<1приЕ> (старый элемент, но со многими новыми 
подтипами), <даёа1151>, <Кеудеп>, <тефег>, 
<ргодгеѕэ>, <соппапа>, <тепи>, <ооџіриї> 


Глава 4 


Элементы для под- 
держки аудио, видео 
и подключаемых мо- 
дулей 


<аџӣіо>, <у1аео>, <ѕоџгсе>, <епреа> (поддержи- 
вался и ранее, но теперь официально является 
частью языка) 


Поддержка холста 


<сапуаѕ> 


Глава 6 


Поддержка языков 
иных, чем английский 


<рао>, <гр>, <гі»>, <гиру> 


Спецификация 
НТМЕ5 на сайте 
ћїр://деу.мЗ.огд/ 
ћїті5/тағгкир 
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Удаленные элементы 


В НТМІ5 были не только добавлены новые элементы, но и несколько элементов 
были лишены официального родства с ним. 


Эти элементы будут работать в браузерах, но любой уважающий себя валидатор 
НТМГ5 (см. разд. "Проверка кода НТМЕ.5" ранее в этой главе) обнаружит их и за- 
катит по этому поводу скандал. 


Самыми заметными шагами при удалении были те, что поддерживают продолжае- 
мую в НТМГ.5 философию (впервые введенную в ХНТМІ): элементам оформле- 
ния не место в языке. К таким элементам относятся элементы, используемые для 
форматирования веб-страниц, и даже самый "зеленый" веб-разработчик знает, что 
это работа для таблиц стилей. Удалены, среди прочих, были элементы оформления, 
которые не использовались профессиональными веб-разработчиками годами, такие 
как <519>, <сепбег>, <Еоп®>, <> И <зігіке>. Атрибуты оформления НТМЕ постигла 
та же судьба, поэтому нет надобности рассматривать их здесь. 


Кроме этого, НТМІ5 вбил осиновый кол в погребенный веб-разработчиками инст- 
румент фреймов. Когда инструмент фреймов НТМЕ впервые увидел свет, он казал- 
ся отличным способом для отображения нескольких веб-страниц в одном окне 
браузера. Но в настоящее время фреймы воспринимаются больше как кошмар дос- 
тупности к веб-страницам, создающим проблемы для поисковых движков, вспомо- 
гательных приложений и мобильных устройств. Но, что довольно интересно, эле- 
мент <і #гапе>, который позволяет вставлять одну страницу в другую, проскользнул 
в новый стандарт. Это ему удалось по той причине, что он используется в веб- 
страницах для выполнения ряда интеграционных задач, таких как вставка в страни- 
цы окон ҮоџТобе, рекламных блоков и поисковых полей Сооз[е. 


Еще несколько элементов были удалены из-за того, что они просто предоставляли 
уже существующие возможности другим способом и были источником частых 
ошибок. Например, функцию элемента <асгопут> лучше предоставляет элемент 
<арьг>, а элементу <арр1е=> предпочтителен элемент <орјесё>. Но подавляющее 
большинство элементов НТМЕ было сохранено в НТМГ5. 


ПРИМЕЧАНИЕ 


Для любителей цифр, семейство НТМІ5 состоит немногим из более 100 элементов. 
Из них почти 30 новых и около 10 существенно измененных. Просмотреть список эле- 
ментов (и узнать, какие из них новые или измененные) можно на веб-сайте 
ћїр://дем.м3.огд/һіті5/тагкир. 


Адаптированные элементы 


У НТМІ5 есть еще один интересный трюк — некоторые старые методы применя- 
ются с новой целью. Возьмем, например, элемент <ѕта11>, предназначенный для 
уменьшения размера шрифта в блоке текста. Будучи не самым оптимальным спо- 
собом решения этой задачи, для которой лучше подходят таблицы стилей, этот 
элемент впал в немилость веб-разработчиков. Но в отличие от выброшенного эле- 
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мента <519>, элемент <зпа11> остался в НТМГ5$, однако функция его несколько 
иная. Теперь элемент <зта11> используется для обозначения так называемого "мел- 
кого текста" — информации, которую не горят желанием предоставить, но которую 
нужно разместить согласно каким-либо требованиям. Например, предупреждение 
об отказе от ответственности, помещенное в самом конце контракта, наподобие 
следующего: 

<ѕпа11>Создатели этого сайта не несут ответственности за любые телесные 


повреждения, которые пользователь может получить вследствие участия в гонках 
одноколесных велосипедов без должного надзора.</зта11> 


Как и ранее, текст внутри элемента <ѕта11> отображается мелким шрифтом, если 
ТОЛЬКО ЭТИ настройки не отменены посредством таблицы стилей. 


ПРИМЕЧАНИЕ 


Мнения касательно этого нового концептуального подхода к употреблению элемента 
<зта11> разделились. С одной стороны, он хорош с точки зрения обратной совмести- 
мости, т. к. старые браузеры уже поддерживают элемент <зта11> и поэтому будут 
поддерживать его и на страницах НТМІ5. С другой же стороны, он вносит потенци- 
ально сбивающее с толку изменение значения для старых страниц, в которых элемент 
<зта11> применяется в оформительских целях, а не в контексте концепта "мелкого 
текста". 


Другим элементом, чей эффект остался прежним, но концептуальное значение бы- 
ло модифицировано, является элемент <һг>, который рисует разделяющую линию 
между блоками текста. В НТМГ5 элемент <ћг> рисует ту же самую линию, но те- 
перь она представляет тематическое прерывание, например переход к другому во- 
просу. Таким образом, результат форматирования остался прежним, но имеет новое 
логическое значение. 


Подобным образом зачеркивание шрифта элементом <з> теперь несет концептуаль- 
ную нагрузку — зачеркнутый этим элементом текст считается больше неверным 
или утратившим значимость, вследствие чего он и был "вычеркнут" из документа. 
Смещение значения действия этих двух последних элементов более утонченное, 
чем элемента <ѕпа11>, т. к. в данных изменениях перенимается способ использова- 
ния этих элементов в традиционном НТМІ. 


Полужирное и курсивное форматирование 


Наиболее важными элементами с измененным значением результата их действия 
являются элементы для форматирования текста полужирным и курсивом. Эти два 
наиболее употребляемые в НТМГ, элемента — <> (от англ. Бо 4 — полужирный 
текст) и <і> (от англ. ЙаЙсх — курсивный текст) — были частично заменены вве- 
денными в первой версии ХНТМІ элементами <зЕгопд> и <еп>, которые выполняли 
то же самое форматирование. Идея заключалась в том, чтобы перестать рассматри- 
вать эти элементы с точки зрения простого форматирования, а придать им логиче- 
ский смысл. Таким образом, элемент <зЕхопа> должен был применяться для логиче- 
ского выделения полужирным форматированием текста, имеющего важное ($015) 
значение, а элемент <ет> для акцентирования (ѕігеѕѕ егтрһаѕіѕ) курсивом определен- 


Глава 1. Представляем НТМІ5 49 


ного блока текста. Идея была довольно рациональной, но элементы <5> и <і> про- 
должали употребляться как более короткие и знакомые заменители введенных 
в ХНТМЕ новшеств. 


В НТМІ5 предприняли другую попытку решить этот вопрос. Вместо того чтобы 
насильно отваживать разработчиков от использования элементов <> и <і>, резуль- 
татам действия этих элементов добавили новые логические значения. Целью явля- 
ется позволить всем четырем элементам мирно сосуществовать в солидном доку- 
менте НТМІ5. В результате получился следующий, несколько размытый, набор 
правил. 


С Элемент <зЕхопд> следует использовать для выделения текста, имеющего важ- 
ное значение, чтобы выделить его из остального текста. 


О А элемент <> следует использовать для текста, который не более важен, чем 
остальной текст, но по каким-либо причинам должен выделяться из него. Таким 
текстом, среди прочего, могут быть ключевые слова, названия товаров и все 
прочее, что было бы выделено полужирным в традиционной печати. 


П Аналогично элемент <еп> следует использовать для акцентирования текста, на 
который делается ударение; иными словами, текста, который произносился бы 
с ударением в устной речи. 


С А элемент <і> используется для форматирования текста, который по той или 
иной причине нужно выделить курсивом, но на который не делается никакого 
особого ударения. Это могут быть, среди прочего, иностранные слова, техниче- 
ские термины и любой текст, который бы выделялся курсивом в печати. 


В следующем листинге приводится пример разметки, в которой все эти четыре 
элемента используются соответствующим образом: 
<зЕгопад>Экстренное сообщение!</зЕхопа> В кондитерской <р>Ажурная</р> идет 


распродажа конфет <1>Птичье молоко</1>. Не мешкайте, потому что с уходом 
последней конфеты такой возможности больше не представится <ем>никогда</ещ>. 


В браузере этот текст будет выглядеть таким образом: 


Экстренное сообщение! В кондитерской Ажурная идет распродажа конфет 
Птичье молоко. Не мешкайте, потому что с уходом последней конфеты такой 
возможности больше не представится никогда. 


Остается лишь ждать, будут ли веб-разработчики следовать благим намерениям 
НТМГ5 или же предпочтут использовать наиболее знакомые элементы для полу- 
жирного и курсивного форматирования. 


Подкорректированные элементы 


В НТМІ5 также изменены правила для нескольких элементов. Обычно эти измене- 
ния затрагивают только незначительные аспекты, которые заметят лишь фанаты 
НТМЕ, но иногда они имеют более глубокий эффект. В качестве примера, среди 
прочих, можно взять редко используемый элемент <адагезз>, который, несмотря на 
свое название, не подходит для работы с почтовыми адресами. Его назначение бо- 
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лее узкое — предоставление контактной информации о создателе документа 
НТМЕ, обычно адреса электронной почты или ссылки на веб-сайт, как показано 
в следующем примере: 


Нашим веб-сайтом управляют: 

<ааагез5> 

<а ргеЁ="та11%0:)з01о@тмуз1Ее.сом">орп Ѕо1о</а>, 

<а ВгеЕ="та1 160 :1сВера@муз1$е.сом">Ъ1за Сһепод</а>, апа 
<а ВгеЕ="та1 160: грауапе@тузѕзібе.сом">Куап Рауапе</а>. 
</адагеѕз> 


Также несколько изменилось назначение элемента <сіёе>. Его можно продолжать 
использовать для указания названия какой-либо интеллектуальной работы, напри- 
мер рассказа, статьи, телевизионной программы ит. п., следующим образом: 


<р>Чарльз Диккенс написал <сіёе>Повесть о двух городах</с16е>.</р> 


Но элемент <сібе> больше неприемлемо использовать, чтобы помечать имена лю- 
дей. Это ограничение оказалось на удивление дискуссионным, т. к. такое примене- 
ние раньше позволялось. Некоторые веб-разработчики уровня гуру публично при- 
зывают разработчиков не обращать внимания на это ограничение. Такое внимание 
довольно странно, т. к. если бы вы были редактором веб-страниц, то могли бы за- 
ниматься этим всю жизнь, и никогда не встретить элемент <с1+е>. 


Более серьезной корректировке подвергся элемент <а>, используемый для создания 
ссылок. В более ранних версиях НТМЕ элементу <а> разрешалось содержать текст 
или изображение со ссылкой. А в НТМІ5 он может содержать все и вся, что озна- 
чает, что теперь ссылки можно делать из целых абзацев текста, вместе со списками, 
изображениями и т. п. Текст со ссылкой подчеркивается, а шрифт окрашивается в 
синий цвет, как и границы изображения. Веб-браузеры поддерживали эти свойства 
годами, но только в НТМГ5 они приобрели официальный статус стандарта, что, 
впрочем, не делает их более или особенно полезными. 


Некоторые корректировки еще не работают ни в одном браузере. Например, эле- 
мент <о1> (от англ. ог4егей 15 — упорядоченный список) теперь имеет атрибут 
хеуегзеа (реверс), который позволяет вести счет в обратном направлении (или 
к единице, или к любому другому значению, указанному в атрибуте э+ах®). Но эта 
возможность еще не распознается ни одним браузером. 


В этой книге мы рассмотрим еще несколько подкорректированных подобным обра- 
зом элементов. 


Стандартизированные элементы 


В НТМГ5 также добавлена официальная поддержка нескольких элементов, кото- 
рые поддерживались в языках НТМЕ и ХНТМЕ, но на неофициальном уровне. Од- 
ним из лучших примеров таких элементов будет элемент <епюеа>, который исполь- 
зуется везде и повсюду в Паутине как универсальный метод для втискивания в 
страницу подключаемого модуля. 
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Более экзотичным является элемент <мрг>>, который указывает необязательный 
разрыв слова, т. е. место, в котором браузер может сделать перенос текста на новую 
строку, если слово не помещается в контейнер: 


<р>Мапу 1Ііпдоџізѕіз гепаіп ипсопуіпсеа ёһаі 
<р>ѕирегса1і<ирг>Ёгаді1іѕііс<ирг>ехріа1іайосіоцѕ</р> іѕ іпаееа а мога. </р> 


Элемент <ърг> полезен, когда нужно вставить длинные названия (которые иногда 
встречаются в терминологии программирования) в ограниченное пространство, на- 
пример в ячейку таблицы или текстовое поле. Но даже если браузер поддерживает 
элемент <уюг>, он разорвет слово только в том случае, если оно не помещается 
в доступное пространство. Таким образом, слово в предыдущем примере браузер 
может отобразить одним из следующих образов, представленных на рис. 1.4. 


Мапу іпоџіѕіѕ гетаіп 
опсопуіпсеа фа 
ѕирегсаігарііѕ(ісехріаіосіоиѕ 
15 ш4ее4 а мога. 


Мапу Ііпбџіѕіѕ гетаіп 
ипсопуіпсеа фа 
ѕирегсаігавіі(іс 
ехріаіосіоиѕ 15 ш4ее4 а 


мога. Рис. 1.4. Разрыв 


слова 


Мапу іпоџіѕіѕ 
гетаіп 
ипсопуіпсей 
аќ ѕирегсаіі 
гае 5 с 
ехр!аН4ос10и$ 
15 ш4ее4 а 


мога. 


Элемент <иъг является естественным дополнением к стандартному элементу <порг>, 
который используется для предотвращения разрыва слова, когда для него имеется 
достаточно места. Но вплоть до НТМІ5 он не поддерживался никаким стандартом 
и распознавался только некоторыми браузерами. 


Современное использование НТМІі 5 


Как можно видеть, стандарт НТМГ.5 поддерживает всевозможные странные мето- 
ды. В то же самое время он возрождает (и стандартизует) некоторые старые либе- 
ральные правила НТМЕ и вводит передовые возможности, которые работают толь- 
ко в новейших браузерах. 


Что касается браузерной совместимости, функциональные возможности НТМГ.5 
можно разбить на три категории. 


О Возможности, которые уже работают. К этой категории принадлежат возмож- 
ности, которые имеют высокий уровень поддержки, но официально не были 
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частью стандарта НТМІ в прошлом (например, метод гас апа 4гор). В нее так- 
же входят возможности, которые можно реализовать для старых браузеров, при- 
ложив очень небольшие дополнительные усилия, наподобие семантических 
элементов, рассматриваемых в главе 2. 


П Возможности с поэтапной деградацией. Например, если у старого браузера 
имеются проблемы с использованием нового элемента <у1аео>, этот элемент по- 
зволит вам предоставить браузеру какое-либо другое средство проигрывания, 
например плеер, использующий подключаемый модуль Н1азВ. Это намного луч- 
ше, чем сообщение об ошибке, которое определенно нельзя назвать поэтапной 
деградацией. В эту категорию также входят второстепенные возможности из 
разряда примочек, на которые старые браузеры могут спокойно не обращать 
внимания, наподобие некоторых старых возможностей для работы с веб- 
формами (например, замещающий текст), и некоторые возможности форматиро- 
вания из С553 (например, для скругления углов или отбрасывания теней). 


П Возможности, требующие обходных решений Јауа$сгірі. Мотивацией для мно- 
гих новых возможностей НТМГ5 послужили разработки, которые веб- 
программисты уже делали другим, более трудоемким, способом. Поэтому не 
стоит удивляться, что много из возможностей НТМГ.5 можно дублировать с по- 
мощью хорошей библиотеки ЈауаЅстірї (или, в худшем случае, написав энное 
количество строк кода собственного специализированного сценария Јауа$стірі). 
Создание обходного решения ЛауабспрЕ может быть очень трудоемкой задачей, 
поэтому, если вы посчитаете, что определенная возможность является необхо- 
димой и требует обходного решения Лауабсирь вы можете просто решить ис- 
пользовать это обходное решение для всех страниц и отложить использование 
методов НТМГ. на будущее. 


В этой книге предполагается, что предпочтения будут отданы подходу с использо- 
ванием методов НТМТ.5 в случаях, когда это абсолютно безопасно. Это будут ме- 
тоды из первой категории вышеизложенного списка. Если возможность принадле- 
жит одной из двух других категорий (что бывает достаточно часто), то вам нужно 
решить, стоит ли погружаться в разработку решения, работающего в старых брау- 
зерах, или же будет предпочтительней подождать и подготовиться к лучшей ситуа- 
ции в будущем. Если в Паутине есть хорошее обходное решение на ЈауаЅсгірі, то 
оно будет указано в этой книге. Но во многих случаях вам придется делать выбор 
между замысловатой новой возможностью и универсальным доступом. 


Поддерживает ли браузер вашу разметку? 


Последнее слово в вопросе, в каком объеме использовать НТМГ.5, принадлежит 
разработчикам браузеров. Если браузер не поддерживает какую-либо возможность, 
нет никакого смысла использовать ее, несмотря на все, что говорится в стандарте. 
В настоящее время существуют четыре или пять основных браузеров (не считая 
браузеров для мобильных устройств с возможностью подключения к Интернету, 
таких как смартфоны и планшеты 1Рад). У разработчика-одиночки нет никаких 
шансов протестировать каждую потенциальную возможность на каждом браузере, 
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не говоря уже о возможности оценить поддержку ее в старых версиях браузеров, 
которые широко используются до сих пор. 


К счастью, существует веб-сайт В@р://сапа$е.сот, который может помочь вам 
справиться с этой задачей. В нем даются подробности поддержки НТМІ5 во всех 
основных браузерах. И, самое приятное, он позволит вам выделить именно те воз- 
можности, которые вам требуются. Веб-сайт работает следующим образом: 


1. Сначала выберите вкладку ТаЫезѕ, а потом вкладку СотраНЫ Шу 1аЫе$ и выбе- 
рите на ней требуемую вам возможность (или группу возможностей), установив 
соответствующие флажки (рис. 1.5)". 


Введите название требуемой возможности в это поле 


5еагсй: 


богаег-гааиѕ, Мерси, мой, ес 


[ сотравыйу вывз | 
Ніде орЧоп$ 


ГРАФ] [ веѕошгсе 


Сайедогу Меһ Вгомѕег Тіте регіо Сати 


ПА! М АИ ПА! ГА! 
ГР] <55 У РезКЕор [4] МоЫіе [Г]ТЬгее уегэюпз Бас [У Кесоттепданоп 
НТМЕ5 И 1Е [М 105 агі Тмуо уегѕіопѕ Баск [у Ргороѕеб Кес. 
5 АРІ И ғгеѓох [М] Орега мии /]Ргемюиз уегзюп [у Сапаійаге Кес. 
Поег М завп м) Орега моЫіе Яситепе У Муопапа Огай 
56 М Сһоте У Апбго Вгомѕег /|Меаг Г/биге У Оег 
М Орега /1Еайќһег губиге Џпоћааі / Моёе 


АКЌегпаїїуеѕ Ѕогі Оћег оріїопѕ 
Г] Ассерё ро/уйіѕ | Моѕіџѕегѕ їгѕї я М Оеѓаііеа ќаЫеѕ 
[Г] АссеѕѕіЫіе союгз 


Г] Ѕһом сопсіцѕіоп= 


Чтобы проверить всю группу возможностей, установите соответствующий 
флажок в этом разделе 


Рис. 1.5. Поиск по заданным параметрам проверяет поддержку только основных возможностей НТМЕ5, 
но для всех версий всех браузеров 


Можно выполнить поиск конкретной возможности, введя ее название в поле 
Ѕеагеһ, расположенное по центру вверху страницы. Или же можно просмотреть 
целую категорию возможностей, установив соответствующий флажок в разделе 
Саѓегоғу слева на странице. (В таком случае будет выведена таблица совмести- 
мости для каждой вложенной возможности.) Например, чтобы проверить только 
возможности, которые считаются частью стандарта НТМГ5, сбросьте все флаж- 


! Интерфейс веб-сайтов меняется со временем. На рис. 1.5 представлен вид сайта на момент написа- 
ния книги. Сейчас эта веб-страница выглядит иначе. Чтобы увидеть флажки, надо щелкнуть по ссылке 
Ѕһоуу оріїопѕ в левой части веб-страницы. (На рис. 1.5 эта ссылка после щелчка называется Не 
оріїопѕ.) Вполне возможно, читатель увидит иной интерфейс сайта после выхода книги из печати. — 
Ред. 
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ки и установите только флажок НТМИ.5. Чтобы проверить совместимость 
возможностей на основе ЈауаЅсгірї, которые сначала входили в НТМГ5, но по- 
том были выделены в отдельную категорию, установите флажок ЈЅ АРІ. А для 
проверки поддержки новых искусных возможностей С$$3 установите флажок 
С5$. 


2. При желании, выберите другие опции, установив соответствующие флажки. 


Можно уточнить результаты поиска, удалив некоторые подробности. Например, 
возможно, вас не интересует информация о совместимости с браузерами для мо- 
бильных устройств или с браузерами, которые находятся в стадии разработки и 
не были официально выпущены. Но обычно не стоит отказываться от этих под- 
робностей, т. к. таблицы легко понимать даже с ними. 


3. Прокрутите страницу вниз, чтобы просмотреть все результаты (рис. 1.6). 


Приблизительное количество браузеров 
(в процентах от общего числа), 
поддерживающих данную возможность 


Некоторые полезные ссылки 
на информацию об этой возможности 


1Е Нігеѓќох Ѕаѓагі Сһготе Оре 


Эти версии ІЕ предоставляют полную поддержку аудио 


Эти версии ІЕ не поддерживают аудио 


Рис. 1.6. В настоящее время результаты поддержки браузерами всех возможностей НТМЕ5 
отображаются в 20 таблицах. В таблице на рисунке отображается состояние поддержки браузерами 
НТМЕ5-элемента <аџаіо> 


Для большого количества возможностей одновременно выводится только 
20 таблиц результатов. Для просмотра следующих 20 таблиц результатов следу- 
ет щелкнуть по ссылке Ѕһоуу пехё 20 внизу страницы. 


В таблице для каждой возможности в заголовках столбцов указаны браузеры, а в 
заголовках строк — их характеристики версий. Определенная версия браузера 
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находится на пересечении соответствующего столбца и строки. Если возмож- 
ность поддерживается данной версией браузера, соответствующая ячейка за- 
крашена светло-зеленым цветом; частичная поддержка обозначается темно- 
зеленым, а отсутствие поддержки — розовым. Если неизвестно, поддерживается 
ли данная возможность, в ячейке не указывается номер версии браузера, а сама 
ячейка окрашена коричневым цветом. 


Статистика популярности браузеров 


Последним важным пунктом проблемы поддержки возможностей браузерами явля- 
ется статистика популярности конкретных браузеров. Иными словами, информация 
о том, сколько посетителей Паутины пользуется браузером, поддерживающим воз- 
можности, которые вы намереваетесь использовать в своей разметке. Одним из хо- 
роших источников этой информации является популярный сайт С]оба {а 
(ћеєр://о5.5аќсоипќег.сот). На странице сайта в раскрывающемся списке Ѕќаёїѕіс 
выберите вариант Вгожѕег. А вариант Вгоуѕег Уегѕіоп позволит просмотреть по- 
пулярность не только конкретного браузера, но и каждой из его версий. Результаты 
можно сузить, выбрав конкретный регион или страну в раскрывающемся списке 
Соопќгу/КЌегіоп. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Іпіегпеї Ехр/!огег утрачивает популярность? 


В процессе изучения НТМІ5 вы быстро обнаружите, что один браузер выделяется на 
фоне всех остальных своим самым низким уровнем поддержки НТМІ5 (а также самой 
медленной скоростью выхода обновлений). Этим плетущимся в хвосте браузером 
является Іпќегпеї Ехр!огег. Хотя выпуском 1Е 9 корпорация Мсгозой сделала громад- 
ный шаг в правильном направлении, уровень поддержки НТМІ5 в ІЕ все еще ниже, 
чем в любом другом современном браузере. 


Не то чтобы Мсгозой не обращает внимания на последние разработки в области 
НТМІ5, но она удерживается от реализации возможностей, которые еще не заверше- 
ны. Для некоторых из этих возможностей Мсгозой предоставляет экспериментальные 
расширения к ІЕ (называющиеся "лабораториями" НТМІ5), которые можно загрузить 
с сайта Мїр://һіті5іабѕ.іпіегорегаЫіііїубгіадеѕ.сот/. Все это хорошо, если вы просто 
хотите немного поиграть с некоторыми новыми возможностями НТМІ5, которые все 
еще находятся в процессе разработки. Но если вы хотите реализовать эти возможно- 
сти в настоящем веб-приложении, то помощи от этого мало. (Конечно же, реализация 
некоторых из этих возможностей граничит с безрассудством, но это уже совершенно 
другой вопрос.) 


Более того, с поддержкой НТМЕ5 в ІТ имеется еще более важная проблема. Как уже 
упоминалось, ІЕ 9 является первой версией ІЕ, поддерживающей возможности НТМІ5. 
Но ІЕ 9 устанавливается только под \Міпаомѕ 7 или \іѕїа. Пользователи с Міпаомѕ ХР 
(которая, несмотря на свой почтенный возраст, на момент написания этой книги была 
самой популярной операционной системой в мире и по всем признакам будет широко 
использоваться еще долгое время, даже после того, как это место займет Міпаом 7), 
не могут установить ПЕ 9 и, соответственно, не могут получить никакой поддержки для 
НТМЕ5. И хотя эти оставленные на произвол судьбы компанией Мсгозой компьютеры 
не полностью потеряны — на них можно установить какой-либо другой браузер — 
пройдет очень много времени, прежде чем веб-разработчики смогут перейти на 
НТМЕ5, не беспокоясь об обнаружении возможностей и резервных решениях. 
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Наконец, с помощью переключателей справа от области вывода результатов можно 
выбрать способ отображения результатов. Столбиковая диаграмма отображает по- 
пулярность браузеров в настоящее время. Для ее вывода отметьте переключатель 
Ваг. А линейный график показывает тенденции в выборе браузера в течение опре- 
деленного периода времени. Этот режим устанавливается переключателем Глпе. По 
умолчанию в режиме линейного графика отображаются результаты за целый год, 
начиная от текущего месяца (рис. 1.7). Но период времени можно настроить, вы- 
брав соответствующее значение в поле Тіте Регіоӣ. 


[ Мат Ргеѕѕ РАС АБоцЕ РееЧЬаск 


ЅіаїСоипїег бюБа! 5{а{5 


Тор 12 Вгомѕег Мегѕіопѕ т Виз$ап РедегаНоп #гот Зап 2011 10 Зап 2012 


Орега 11.0 
Орега 11.5 
Орега 11.1 


Ғігеѓох 4.0 


ТЕ 9.0 


1Е 7.0 


Сһгогте 15.0 
СҺгогте 16.0 
м пе 


© Е ваг 


Еігеѓох 8.0 


Орега 11.6 


Оњег 


1696 24% 32% 40% 


Ѕ#аќ151їс: Вгомѕег Мегзюп У Соипгу/Ведюп: |Киѕѕіап Ғейегайоп У тте Регіоа: Јап 2011 {о Јап 2012 


Рис. 1.7. Как видно на рисунке, поддержка НТМІ5 браузерами не впечатляет 


Сайт Софа! {а собирает статистические данные ежедневно с помощью кода сле- 
жения, который установлен на миллионах веб-сайтов. Но в то время как эти стати- 
стические данные представляют огромное количество страниц и громадный объем 
данных, все равно это лишь малая часть всей Паутины. Это означает, что нельзя 
непременно полагать, что посетители вашего веб-сайта будут пользоваться такими 
же браузерами. 


Более того, браузерные предпочтения могут быть разными в зависимости от страны 
пользователя и типа веб-сайта. Например, в Германии наиболее популярным брау- 
зером является Етеох, которому отдают предпочтение 60% пользователей веб, а в 
Белоруссии это Орега с 49% доли пользователей Интернета. А на веб-сайт ТесрСгипсһ 
(популярный новостной сайт для компьютерных фанатов) всего лишь 16% посети- 
телей заходят с помощью самого популярного в мире браузера, Іпіегпеі Ехрюгег. 
Поэтому, если вы хотите разработать веб-сайт для пользователей своего круга, изу- 
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чите статистические данные для страниц своего веб-сайта. (Если вы еще не поль- 
зуетесь услугами сбора статистических данных для своего сайта, вас может заин- 
тересовать совершенно бесплатная услуга высокого уровня СоовІе Апауйс$. 
См. ууу. зоое.сош/апа!уйс$.) 


Определение возможностей 
с помощью Модегпі2г 


В течение нескольких следующих лет абсолютно реальным будет то обстоятельст- 
во, что некоторые посетители вашего веб-сайта будут пользоваться браузерами, не 
поддерживающими НТМІ5. Но это не должно остановить вас от использования 
возможностей этого стандарта при условии, что вы согласны вложить немного уси- 
лий в разработку обходных решений или возможности поэтапной деградации. 
В любом случае вам, скорее всего, потребуется некоторая помощь ЈауаЅспірі. 
Обычно это делается таким образом: после загрузки вашей страницы браузером 
запускается специальный сценарий, который проверяет, поддерживает ли браузер 
определенную возможность. 


К сожалению, т. к. в своей основе НТМІ 5 является набором связанных стандартов, 
одного общего теста на поддержку возможностей не существует. Вместо этого тре- 
буется выполнить несколько десятков разных тестов, чтобы проверить наличие 
поддержки различных возможностей, при этом иногда даже требуется проверять, 
поддерживается ли определенная часть возможности, что очень быстро делает за- 
дачу тестирования весьма неприятной. 


При проверке поддержки некоторой функциональности браузером обычно требует- 
ся найти возможность в программном объекте или создать объект и использовать 
его определенным образом. Но подумайте хорошенько, прежде чем приступать к 
написанию кода тестирования такого типа, т. к. с этой задачей очень легко нало- 
мать дров. Например, код для проверки поддержки возможности браузерами может 
не работать на некоторых браузерах по той или иной непонятной причине или бы- 
стро устареть. Вместо этого подумайте о применении компактного, постоянно об- 
новляемого инструмента Мойегпітг (ууүуу.тойегпізг.сот), который проверяет под- 
держку браузерами широкого диапазона возможностей НТМГ5 и связанных воз- 
можностей. Он также предоставляет классный метод для реализации поддержки 
резервных решений при использовании новых возможностей С$53 (см. разд. "Стра- 
тегия 3: добавляйте резервные решения с помощью Мойеғпігт" главы 8). 


Проверка веб-страниц с помощью Мойегпіхг выполняется так: 


1. Загрузите ЛауабсирЕфайл для Модепитг. Для этого в области Юромпіоаа Мо- 
4еги17г в верхней центральной части страницы нажмите кнопку Эеу@ортепе. 


Обычно, имя этого файла будет похоже на то4еги12г-2.0.6.]5. Точное имя зави- 
сит от используемой версии. Некоторые разработчики переименовывают этот 
файл, убирая номер версии, например тодегилтт.]з. Это позволяет обновить файл 
Модегиттг в будущем, не требуя поиска и корректировки ссылок на него в веб- 
страницих, в которых он используется. 


58 


2. 


Часть І. Знакомство с новым языком 


СовеТ 


Код полной версии Моаегпігг несколько объемистый. Эта версия сценария предназна- 
чена для выполнения тестирования на стадии разработки веб-сайта. По окончании 
разработки, когда сайт можно публиковать для использования, можно создать облег- 
ченную версию сценария Моаегпігг, которая тестирует только требуемые возможно- 
сти. Для этого загрузите версию Ргодисйоп, нажав одноименную кнопку в области 
Оомпіоаа Модегпіхг. Откроется страница, предлагающая выбрать возможности, под- 
держку которых вы хотите проверять (установив соответствующие флажки), а потом 
создать свою специальную версию сценария Моаегпігг, нажав кнопку Сепегае слева 
внизу страницы. 


Скопируйте файл сценария в папку, в которой находится веб-страница, требую- 
щая тестирования. Либо файл сценария можно поместить в подкаталог и под- 
корректировать должным образом путь к ней в ссылке ЈауаЅсгірі (см. следую- 
щий шаг). 


В блоке <ъеаа> тестируемой веб-страницы вставьте ссылку на файл сценария 
Модегптг. В следующем листинге показан пример вставки этой ссылки: 


<Һеаа> 
<пефа сһагѕеі="оЁ#-8"> 
<Е1Е1е>НТМЬ5 Ғеаёџге реіесііоп</біё1е> 
<ѕсгірё ѕзгс="тойегпі2р-2.0.6.јѕ="></ѕсгірё> 


</Һеаа> 

Теперь, всякий раз при загрузке этой страницы будет исполняться сценарий 
Модепитг. В считанные миллисекунды сценарий тестирует поддержку пары де- 
сятков новых возможностей, а потом создает объект ЈауаЅсгірі, называющийся, 
опять же, Мойегпіхг и содержащий результаты тестирования. Чтобы проверить 


поддержку браузером определенной возможности, тестируются свойства этого 
объекта. 


СОВЕТ 


Полный список тестируемых с помощью Моаегпігг возможностей, а также код 
Јаҹма$сгірё для тестирования каждой из этих возможностей, см. в документации по 
ссылке м\мм.тодегпігг.сот/аосѕ. 


Напишите сценарий, который тестирует требуемую возможность, а потом вы- 
полняет соответствующее действие. Пример возможного сценария для проверки, 
поддерживается ли НТМІ.5-возможность гас апа гор, и вывода результатов 
в окне браузера показан в следующем листинге: 


<!РОСТУРЕ Һітм1> 
<Һіпі 1апа="еп"> 
<Һеаа> 
<пефа сһагѕеі="оЁ#-8"> 
<Е1Е1е>НТМТ 5 Ееаёџге ребесііоп</біё1е> 
<ѕсгірё згс="подӢегпіхг-2.0.6.ј5"></ѕсгірі> 
</Һћеаа> 


<роау> 
<р>Тће уегаісі іѕ... <ѕрап іа = "гезѕи1ё"х/ѕрап></р> 
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<ѕсгірё> 
// Найти элемент на странице (называющейся гези), в котором 


// можно вывести результаты. 


уаг геѕиії = аӢосоптепі .деіЕ1етмепіВута ("геѕи1ё"); 
1Е (Моаегпіхг.агадапаагор) { 


теза1е.1ппехНТМЬ = "Кејоісе! Уойк ргоиѕег зиррогёѕ" + 
"Ягад-апа-агор.". 


} 


е1зе { 
теза1е.1ппехНТМЬ = "Үоџг Ғеер1е Юргоиѕег Ӣоеѕп'ё " + 
"ѕоррогі агасд-апа-агор."; 
} 
</ѕсгірі> 
</роау> 
</ћіт1> 


Результаты исполнения этого сценария показаны на рис. 1.8. 


[=] 1427) Реавигебеесноп.Ныт! р- эх 


ё НТМІ5 Ғеаїџге Оеѓесііоп | | 


Тһе уетгӣісї 15... Кејоісе! Үоог бготуѕег зирройз гас-апі- 
дгор. 


Рис. 1.8. Результат исполнения сценария тестирования 
поддержки браузером возможности агад апа агор 


Хотя в этом примере показан правильный способ проверки поддержки возможно- 
сти, применяемый в нем подход к обработке неподдерживаемой возможности не 
идеален. Вместо того чтобы просто проинформировать (пусть даже и самым веж- 
ливым образом) посетителя вашего веб-сайта о том, что его браузер не поддержи- 
вает определенную функциональность вашего сайта, намного лучше будет реали- 
зовать какое-либо обходное решение, даже если это решение и не будет таким 
изящным или обладать всеми способностями заменяемой возможности НТМГ.. 
Например, если неподдерживаемая возможность — всего лишь какая-то несущест- 
венная примочка, которая бесполезна для посетителя сайта, то эту проблему можно 
вообще игнорировать. 


СОВЕТ 


В этом примере применяются базовые, проверенные временем, методы Јауа$сгірі — 
поиск элемента по его 10 и изменение содержимого элемента. Если вы не вполне по- 
нимаете, как это работает, обратитесь к приложению 2. 
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Замена 
отсутствующих возможностей заполнителями 


Инструмент Мойегпітг позволяет разработчику обнаружить дыры в поддержке воз- 
можностей браузером, информируя его о неработающей функциональности. Но он 
ничего не делает для решения этих проблем. И здесь на выручку приходят заполни- 
тели! (ро1уё115, полифилы). По сути, заполнители — это разношерстный набор ме- 
тодов для заполнения дыр в поддержке старыми браузерами стандарта НТМГ5. 
Английское слово роіу[ происходит от продукта ро[уПег, который представляет 
собой смесь для заделки дыр в гипсокартоне перед покраской, т. е. попросту вид 
шпаклевки. В НТМГ.5 идеальным заполнителем будет такой, который можно вста- 
вить в страницу без излишних усилий. Такой заполнитель предоставляет обратную 
совместимость без прерываний в работе страницы и не влияет на остальной код 
страницы, что позволяет разработчику работать с чистым НТМГ5, в то время как 
кто-то другой беспокоится об обходных решениях. 


Но заполнители — не совсем идеальное решение. Некоторые из них полагаются на 
другие технологии, для которых может предоставляться только частичная под- 
держка. Например, один из полифилов позволяет эмулировать элемент НТМІ5 
<сапуаз> на старых версиях Пуегтеё ЕхрІогег с помощью подключаемого модуля 
5Пуегећ. Это хорошо, если на браузере посетителя вашей веб-страницы установ- 
лен данный модуль. Но если нет, и посетитель не хочет или не может установить 
его, то вам нужно прибегнуть к какому-либо другому решению. Другие заполните- 
ли могут быть менее работоспособными, чем настоящая возможность НТМГ5, или 
менее производительными. 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Модифицирование ІЕ с помощью Соодіе Сһготе Егате 


Самым большим изо всех заполнителей является Соодіе Сһготе Егате, подключае- 
мый модуль браузера для Іпїегпеї Ехр/огег версий 6, 7, 8 и 9. Этот заполнитель запра- 
шивает исполнение браузера Сһготе в процессе работы ІЕ и обрабатывает страницы 
НТМЕ5. Но Сћготе Егате запускается не для всех НТМІ5-страниц, а только для таких, 
в которые их разработчик вставил информацию, явно разрешающую это сделать. 


Очевидным ограничением Сһготе Егате является то обстоятельство, что для того, 
чтобы веб-сайты могли использовать его, пользователи должны установить его на 
свои браузеры. А если они не имеют ничего против этого, то почему бы тогда не уста- 
новить полноценный браузер Сһготе? В любом случае, если вы хотите узнать больше 
о Соодіе Сһготе Егате, то можете обратиться по адресу ћір://соде.доодіе.сот/ 
сһготе/сһготеігате. 


В этой книге дается информация о некоторых возможных заполнителях. Более под- 
робную информацию можете найти самое что ни на есть близкое к всеохватываю- 
щему каталогу полифилов НТМІ5 на веб-сайте СИНиб (һрѕ://оіһор.сот/ 
Модегпі2г/Модйегпізг/уікі/НТМІ5-Сгоѕѕ-ргоуѕег-РоІіубіІѕ). Но имейте в виду — 
диапазон качества, производительности и поддержки заполнителей очень большой. 


1 Устоявшегося русского термина пока нет. Поэтому назовем это средство словом, выражающим 
смысл данного средства. — Ред. 
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СОВЕТ 


Помните, что недостаточно просто знать, что для данной НТМЕ5-возможности суще- 
ствует заполнитель. Необходимо протестировать его и проверить качество его работы 
на разных старых браузерах, прежде чем идти на риск и публиковать соответствую- 
щую возможность на своем веб-сайте. 


Имея в своем распоряжении инструменты для сбора статистических данных о брау- 
зерах, тестирования функциональностей и создания обходных решений, вы готовы 
к серьезному рассмотрению использования возможностей НТМГ5 в своих 
веб-страницах. В следующей главе мы сделаем первый шаг к этому, рассмотрев 
некоторые элементы НТМГ5, которые работают как в новых, так и в старых брау- 
зерах. 


ГЛАВА 2 


Новый способ 
структурирования страниц 


За почти два десятилетия существования Интернета веб-сайты претерпели рази- 
тельные изменения. Но больше всего удивляют не масштабы изменения Интернета, 
а то, как хорошо сохранились древние элементы НТМЕ. По существу, веб- 
разработчики создают современные веб-сайты, используя такой же набор элемен- 
тов, что и десять лет тому назад. 


Один элемент в особенности — скромный <аіу> (от англ. аїріѕіоп — раздел, 
блок) — является краеугольным камнем каждой современной веб-страницы. С по- 
мощью элементов <аіу> в документе НТМІ можно разместить колонтитулы, боко- 
вые панели, панели навигации и многое другое. Добавив хорошую щепотку 
С55-форматирования, эти секции можно превратить в блоки с границами или зате- 
ненные колонки и поместить каждый из них точно в требуемом месте. 


Форматирование страниц с применением элемента <а1у> и таблиц стилей — метод 
прямолинейный, мощный и гибкий. Но не прозрачный. Это означает, что изучение 
разметки другого разработчика требует определенных усилий в том, чтобы разо- 
браться в каждом элементе <аіу> и целиком во всей странице. Чтобы понять логику 
разметки, необходимо перескакивать туда и обратно между разметкой, таблицами 
стилей и отображением страницы в браузере. С таким затруднением вам придется 
столкнуться при рассмотрении более-менее сложной веб-страницы любого разра- 
ботчика, хотя, скорее всего, вы применяете такие же методы для создания своих 
веб-страниц. 


Эта ситуация заставила разработчиков задуматься, нельзя ли заменить элемент 
<аіу> чем-либо лучшим? Чем-то, что работало бы подобно <аіу>, но было бы более 
осмысленным. Чем-то, что помогло бы отделить боковые панели от заголовков, а 
рекламные панели от меню. Стандарт НТМІ5 позволяет сделать эту мечту реаль- 
ностью, предоставляя набор новых элементов для структурирования страниц. 


СОВЕТ 


Если ваших знаний С$$ недостаточно, чтобы понять, о чем идет речь в какой-либо 
рассматриваемой таблице стилей, тогда вы не совсем готовы для изучения этой гла- 
вы. Но не отчаивайтесь, в приложении 1 представлено введение в основы С$$, зна- 
комства с которым будет достаточно для продолжения изучения НТМЕ5. 
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Что такое семантические элементы? 


Новые семантические элементы НТМГ5 позволяют улучшить структуру веб- 
страницы, добавляя смысловое значение заключенному в них содержимому. 


Например, новый элемент <ёіме> обозначает действительную дату или время веб- 
страницы. Вот самый простой пример использования этого элемента: 


Регистрация начнется <&1те>2012-11-25</Е1ме>. 


В браузере эта разметка отображается таким образом: 


Регистрация начнется 2012-11-25. 


Здесь важно понимать то обстоятельство, что элемент <Е1те> не обладает никакими 
встроенными возможностями форматирования. По сути, ничто не говорит устрой- 
ству для чтения веб-страниц о том, что дата в коде страницы заключена в дополни- 
тельный элемент. Хотя к элементу <єіпе> можно добавить дополнительное форма- 
тирование с помощью таблицы стилей, по умолчанию он ничем не отличается от 
обычного текста. 


В данном случае, элемент <е1те> предназначен содержать одну единицу информа- 
ции. Но большинство семантических элементов НТМІ5 не такие: они служат для 
обозначения блоков содержимого большего размера. Например, элемент <пау> обо- 
значает набор ссылок для перемещения по содержимому, элемент <Еоофек> в коде 
обрамляет нижний колонтитул страницы и т. д. для десятка (или около этого) но- 
вых элементов. 


ПРИМЕЧАНИЕ 


Хотя семантические элементы наименее впечатляющие из новых возможностей 
НТМІ 5, они составляют одну из самых больших групп. По сути, большинство новых 
элементов НТМЕ5 является семантическими элементами. 


Все семантические элементы имеют одну общую отличительную особенность: они 
по существу ничего не делают. В противоположность, элемент <уідео>, например, 
вставляет в веб-страницу полноценный видеоплеер (см. разд. "Воспроизведение 
видео с помощью элемента <уійео>" главы 5). Зачем же тогда утруждать себя ис- 
пользованием набора новых элементов, которые никак не изменяют внешний вид 
веб-страницы? 


Этому есть несколько хороших причин. 


О Более удобное редактирование и сопровождение. Разметка традиционной 
НТМІ-страницы может быть трудной для понимания. Чтобы понять общую 
структуру и значение отдельных блоков страницы, часто приходится исследо- 
вать ее таблицу стилей. А использование семантических элементов НТМГ5 по- 
зволяет разработчику предоставить в разметке страницы дополнительную ин- 
формацию о ее структуре. Это облегчит вам жизнь, когда потребуется редакти- 
ровать эту страницу через несколько месяцев, и будет еще более кстати, если 
вашу работу придется редактировать кому-то другому. 


П Доступность. Одной из ключевых тем в сфере современного веб-дизайна явля- 
ется создание доступных страниц, т.е. страниц, которые пользователи могут 
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просматривать и перемещаться по ним с помощью программ-ридеров' и других 
вспомогательных средств. В настоящее время разработчики инструментов, 
делающих контент страницы доступным, все еще пытаются догнать НТМГ5. 
Когда они, наконец, достигнут весомого результата, то смогут предоставить на- 
много лучшие возможности просмотра веб-страниц для пользователей с ограни- 
ченными возможностями. (Только один пример, представьте себе, как програм- 
ма чтения экрана (скрин-ридер) может использовать элементы <пау>, чтобы бы- 
стро найти ссылки для перемещения по странице или на внешние ресурсы.) 


СовеТ 


С дополнительной информацией о передовых практиках в области доступности веб- 
страниц можно ознакомиться на веб-сайте организации ММАР (мумии. м3 .ога/МГА!). Или 
же, чтобы получить представление о жизни со считывателем экрана (и заодно узнать, 
почему так важно правильное размещение заголовков), можете просмотреть видео на 
ҮоиТире (пир:/Атучи.сот/би4ре). 


П Оптимизация поисковых движков. Поисковые движки наподобие Соозе ис- 
пользуют мощные поисковые роботы — автоматизированные программы, кото- 
рые методически обходят Интернет и просматривают все страницы, которые 
они могут найти — для сканирования содержимого веб-страниц и составления 
для них указателей в своих поисковых базах данных. Чем лучше Соов]е понима- 
ет вашу веб-страницу, тем больше шансов, что он сможет сопоставить ее содер- 
жимое с поисковым запросом, и тем больше шансов, что ваша веб-страница бу- 
дет отображена в результатах чьего-либо поиска. В настоящее время поисковые 
роботы уже проверяют на наличие некоторых семантических элементов НТМГ5, 
чтобы собрать всю возможную информацию об индексирующих их веб- 
страницах. 


О Поддержка будущих возможностей. В новых браузерах и инструментах редак- 
тирования веб-страниц несомненно будет использоваться самыми разнообраз- 
ными способами весь диапазон предоставляемых семантическими элементами 
возможностей. Например, браузер может предоставлять посетителям веб- 
страницы сводку ее содержимого, что позволит им быстро перейти к интере- 
сующему их разделу страницы, наподобие Панели навигации в М1сгозой Мога 
2010. (Надо сказать, что браузер Сһготе уже имеет подключаемый модуль, ко- 
торый как раз это и делает, см. рис. 2.10.) Подобным образом инструменты для 
веб-разработки могут содержать возможности, позволяющие создавать или ре- 
дактировать меню навигации посредством управления содержимым, помещае- 
мым в блок <пау>. 


Из всего этого можно сделать следующий вывод: правильно используя семантиче- 
ские элементы, можно создавать более аккуратные и понятные веб-страницы, гото- 
вые для работы со следующим поколением браузеров и веб-приложений. Но если 
ваше мышление все еще сковано устаревшим подходом традиционного НТМГ, 
будущее может просто обойти вас стороной. 


1 Их называют скрин-ридерами — от англ. ѕсгееп геаег. — Ред. 


2 \\еБ АссеззПиу Пийануе — Инициатива по общедоступности сети. 
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Модифицирование 
традиционной НТМЁ-страницы 


Легче всего начать знакомство с новыми семантическими элементами, а также обу- 
чаться их применению для структурирования страницы на классическом НТМГ- 
документе и вставить в него некоторые облагоображивающие элементы НТМТ.5. 
На рис. 2.1 показан первый пример, который вы можете попробовать реализо- 
вать. 


Заголовок Блок верхнего 


Строка с именем автора первого уровня колонтитула 


С [а Ароса!урзеРаде_Опдта „Һет р "Эх | {© роса! рѕе Мом 


Ном {Пе Могіа Соиіа Епа 


1СНТ МОМ, уоц'те ргоБаЫу ѓееіпо ргеќу роса. АЁег ай, іе іп ће 
деуеіореа мога із сопога е— ргоба у тоге сопѓогіаЫе #һап із 
Ъееп #ог ће ауегазе Натлап Беле #ћгоцрһоиѓ а оЁгесогае4 һіѕќогу. 


Биг аоп'ї реї їоо эти. Тћеге'ѕ 51111 ріепсу оѓ Вог! йс мгауз ії сои] 4 а! ѓа 
арагї. [п #һіз агЫсе, уоч'Шеаги ароиѓ а {ем оЁоиг ЁауогИез. 


ауап Роотѕӣау 
Ѕкерііс= ѕиссеѕї аї {пе Мауап саЇелааг ѕітріу го їо а пем 5,126-уеаг 
ега айег 2012, апа аоеѕп' асёааПу рге@ ска 11 е-епаіпр ароса]урзе. Ви 
сіуеп ћаё ће 1оп5-4еа4 Мауап$ мете мтопв ађопї уігѓпа[1у еуету тя 
еЇѕе, ћу ѕһоша ме газ ћет ол #15? 


ооё ТаКеоуег 


М№ої диНе аз Ёгідепіпраѕ а Уатріге Такеохег ог іуіпр-Оеаа Такеоуег, а | 
гофБоЕ гебеШоп 1$ 511 а 915 але тя Њоцећ. Ме аге атеа4у оџёпштђегей 
хоп ] Е, > Зах; Һс 


гърсћпојосісаї сааса эпа етап В] Саое оак а да 


СІођаі Ерійетіс 

Ѕоте їппе іп ће Ашиге, аІеёа! уігиѕ сош А зігіке. Ргейісбопз аіҝег ароиё 
ће зоигсе оЁ е Яіѕеаѕе, Би сапіідаѓеѕ іпсіцӣе топКеуѕ іп пе Айісап 
јчпа]е, Боѓеггогіѕіѕ, Ьігаѕ апа рігѕ уіїћ {ће Йи, уғаггіогѕ гот е ѓаѓиге, 
ап аНеп гасе, һоѕріќа! ‘һа иѕе {оо тапу апібіоѓісѕ, уатрігеѕ, ће СІА, 


апа ипуаѕћеа Ьгисзе! ѕргоиќє. МЋаќѓоуег {һе ѕоигсе, = сіеапу Баа пем. 


Тћеѕе зросз/ургіс рғеаїсёіопѕ до по? тЙес? гће иеиз оѓ ће зигћог. 
АЬош Из Оізсізітег Сотасї 05 


Соругіяһ: © 2011 


Заголовок второго уровня Нижний колонтитул 
Введение 


Рис. 2.1. Эта НТМЕ-страница имеет базовую структуру, подобную структуре документа. 
Все форматирование осуществляется с помощью связанной таблицы стилей 
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Это простая, самодостаточная веб-страница, содержащая статью, хотя другие типы 
содержимого (например, сообщения блогов, описание продукта или короткий рас- 
сказ) вполне бы подошли для этих целей. 


СовеТ 


Пример на рис. 2.1, а также все другие примеры в этой книге можно просмотреть или 
загрузить из сайта книги по адресу Һір://мм\.ргоѕеїесһ.сот/һіті5/. Если вы 
хотите модифицировать НТМЁ-код сами, начните со страницы АросаурзеРаде_ 
Огіадтаі.Һті, а если желаете сразу же увидеть конечный НТМІ5-результат, просмот- 
рите страницу АросаіурѕеРаде _Вехіѕеа.ћті. 


Структурирование страницы старым способом 


Отформатировать страницу, показанную на рис. 2.1, можно несколькими разными 
способами. К счастью, в этом примере применены самые передовые подходы 
НТМЕ, поэтому в разметке нет ни намека на средства форматирования. В ней нет 
ни элементов для полужирного или курсивного начертания, ни вставляемых в стро- 
ку разметки стилей и определенно ничего похожего на такое уродство, как уста- 
ревший элемент <ғопғ>. Вместо этого документ аккуратно отформатирован посред- 
ством связи с внешней таблицей стилей. 


В следующем листинге приводится сокращенная версия разметки. В ней жир- 
НЫМ шрифтом выделены места, в которых документ привязывается к таблице 
стилей: 

<аіу с1аѕѕ="Неайег"> 


<һ1>Ном һе Мог1А Соџіа Епа</һћ1> 
<р сІаѕѕ="Теаѕер">5сепагіоѕ (Паф зре11 һе епа оЕЁ 1іѓғе аз ме Кром</р> 


<р сІаѕѕ="Ву1іпе">ру Вау М. Сагпаїііоп</р> 
</аіу> 


<аіу с1аѕѕ="Сопёепё"> 
<р><зрап с1аѕѕ="Іеааїп">Бісдһі пом</зрап>, уоџ'ге ргорар1у...</р> 
<р>...</р> 


<Һ2>Мауап РоотѕӢау</һ2> 
<р>5керЕ1сз зидаезЕ ...</р> 


</аіу> 


<аіу с1азз="Еоофег"> 
<р сІаѕѕ="ріѕсІаітег">Тһеѕе ароса1урііс ргедісііопѕ ...</р> 
<р> 
<а һгеЁ="Ароџі0ѕ . пім ">Арооџі Оѕ</а> 


</р> 
<р>Соругідћі © 2011</р> 
</аіу> 


Глава 2. Новый способ структурирования страниц 67 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Что означают эти многоточия? 


Мы не можем поместить в эту книгу полностью всю разметку для каждого примера, по 
крайней мере не без того, чтобы она не разбухла до 12 тыс. страниц, для чего потре- 
бовалось бы вырубить целый лес. Но мы можем показать базовую структуру страницы 
и все ее основные элементы. Для этого во многих примерах мы пропускаем второсте- 
пенное содержимое, обозначая его посредством многоточия (...). 


В качестве примера рассмотрим представленную выше разметку. Она содержит все 
тело показанной на рис. 2.2 страницы, но в ней отсутствует полный текст большинства 
абзацев, большая часть статьи, следующей после заголовка "Мауап Ооотѕаау", и 
весь список ссылок в нижнем колонтитуле. Но, как уже упоминалось, весь пропущен- 
ный материал можно изучить в файлах для примеров, доступных на сайте 
м\\№.ргоѕеїесһ.сот/һіті5. 


В хорошо написанной, традиционной НТМІ -странице (подобной этой) большинст- 
во работы по форматированию отдается на откуп таблице стилей посредством кон- 


деуеІореа мога із сотѓог+аЫе-—-ргораЫу тоге сотќѓог+аЫе вап И'5 
Ъееп ѓог ће ауегазе тап Без #ћгоцсћһоиї а] оѓ гесогаеа ћіѕќогу. 


Ви доп реї їоо шие. ТНеге'5 5111 решу оѓ һоггійс мау И сои! а ѓа 
арагї. [п #һіз агііс1е, уоч'Шеагп аБоц а {ем оЁоиг ЁауогИез. 


Мауап Роотѕӣау 

ЅКкеріісѕ ѕцссеѕї ћаї {ће Мауап саіелааг пару го!1ѕ {о а пем 5,126-уеаг 
ега айег 2012, апа Чоезп" асіџаПу ргедісі а 11 е-епаіпр аросаіурѕе. Ви 
сіуеп Њаї е 1оп8-4еа4 Мауап$ уете мл`опв ађоиі упфааЙу еуету тя 
е[5е, му ѕһоца ме їгиѕё ћет ол 15? 


М№ої аиИе аз Ёгідіепіпраѕ а Уатріге Такеотег ог Мупя-Оеа ТаКеоуег, а 
гођоѓ геБеШоп 1$ 511] а 415ае пе ћоцеһћ. Ме аге аігеайу ошпштђегеі 
Пия А х фллье Ка Я} с 


Лале залы 2 - РУ Са+ас 


СІођаі Ерійетіс 

Ѕоте їе іп Те Ёиёиге, а |е Ва] уігиѕ социа ѕїгіке. Ргейісіопз аі ег ароцё 
ће зоитсе оЁ е діѕеаѕе, Биї сапііаѓеѕ іпсіце топКеуѕ іп {пе Абісап 
јчпо!е, Біоѓеггогіѕіѕ, Ьігаѕ апі рісѕ уіїіћ ће Ям, уғаггіогѕ гот ће ииге, 
ап аіеп гасе, һоѕріќа1ѕ ћаї изе {оо тапу апііріоїісѕ, уатрігеѕ, ће СІА, 
апа ипм’азБеа Ьгизѕе! зргоц5. МПа{еуег {Не зоигсе, = сІеапу Бай пез. 
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<ам>| ^^” тее аросзфрие ргедіснопз до пов тебес е ет оће зто 7 


АЬош Из РізсЇаітег Сопќасї Ц 


‘ Сорунав © 2011 


Рис. 2.2. Элементы <аіу> разбивают эту страницу на три логических блока: верхний колонтитул вверху, 
основное содержимое и нижний колонтитул внизу 
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тейнеров <діу> и <ѕрап>. Элемент <зрап> позволяет форматировать отрывки текста 
внутри другого элемента. А элемент <аіу> — целые блоки содержимого, и устанав- 
ливает общую структуру страницы (рис. 2.2). 


В данном случае перед таблицей стилей стоит легкая задача форматирования. Для 
всей страницы установлена максимальная ширина в 800 пикселов, чтобы текст не 
отображался длинными строками на широкоформатных мониторах. Верхний ко- 
лонтитул помещен в блок синего цвета, для содержимого сделан отступ с каждой 
стороны, а нижний колонтитул расположен по центру страницы внизу. 


Элемент <а1у> делает задачу форматирования легкой. Рассмотрим, например, таб- 
лицу стилей для форматирования блока верхнего колонтитула и его содержи- 
мого: 


/* Форматируем элемент <а1\>, который представляет верхний колонтитул 


(как блок с рамкой и синей заливкой). */ 


.Неадег { 
Баскагоипа-со1от: #7695ЕЕ; 
Богаег: Єһіп #336699 зо11а; 
раааіпд: 10рх; 
пагдіп: 10рх; 


ТехЕ-а119п: сепіег; 


/* Форматируем все заголовки <һ1> в элементе <аіу> 


верхнего колонтитула (заголовок статьи). */ 


.Неадег Һ1 { 
пагдіп: 0рх; 
со1ог: мһіёе; 


Ғопё-ѕіле: хх-1агае; 


/* Форматируем подзаголовок в элементе <діу> заголовка. */ 
.Неадег .Теаѕег { 

пагдіп: 0рх; 

Ғопё-меідһё: ро1а; 


/* Форматируем строку с именем автора в элементе <аіу>. */ 
.Неааег .Ву1іпе { 

Ғопё-зіу1е: 16а11с; 

Ғопі-ѕіхе: зта11; 

пагдіп: 0рх; 


} 


Обратите внимание на умелое использование в этом примере контекстуальных 
селекторов (см. разд. "Контекстные селекторы" приложения 1). Например, с по- 
мощью селектора .неадег һ1 форматируются все элементы <һ1> в блоке заголовка. 
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СОВЕТ 


Этот пример также рассматривается в обзоре С$$ в приложении 1. Если вы хотите 
подробно разобраться с правилами таблицы стилей, которые форматируют каждый 
блок, см. разд. "Экскурсия по таблице стилей" приложения 1. 


Структурирование страницы с помощью НТМЕ5 


Элемент <аіу> — основное средство современного веб-дизайна. Это контейнер об- 
щего назначения, с помощью которого можно форматировать любую часть веб- 
страницы. Недостатком элемента <аіу> является то, что он не предоставляет ника- 
кой информации о странице. Встретив в разметке элемент <аіу>, вы (или браузер, 
средство разработки, скрин-ридер, поисковый робот и т. п.) понимаете, что нашли 
отдельный блок страницы, но не знаете назначение этого блока. 


Чтобы исправить такую ситуацию, в НТМІ5 некоторые элементы <аіу> можно за- 
менить более описательными семантическими элементами. Эти семантические 
элементы действуют в точности таким же образом, как и <аіху>-элемент: они груп- 
пируют часть разметки в блок, но не выполняют никаких собственных операций 
над содержимым блока; они также предоставляют "стилевую зацепку", позволяю- 
щую присоединять форматирование. Но кроме всего этого, они также добавляют 
в страницу семантический смысл. 


Далее приводится разметка страницы, показанной на рис. 2.1, но с применением 
новых элементов. В частности, два элемента <аіу> заменены НТМГ5$-элементами 
<Һеайег> И <Еоофег>. 


<һеайег с1аѕѕ="Неайег"> 
<Һ1>Номт һе Мог1А Соџіа Епа</ћ1> 
<р сІаѕѕ="Теаѕер">5сепагіоѕ ЕПаф зре11 һе епа ої 1іѓе аз ме Кром</р> 


<р сІаѕѕ="Ву1іпе">ру Вау М. Сагпаііоп</р> 
</Һеайег> 


<аіу с1аѕѕ="Сопёепё"> 
<р><зрап с1аѕѕ="Іеааїп">Вісдһі пои</ѕрап>, уоџ'ге ргорар1у ...</р> 
<р>...</р> 


<Һ2>Мауап РоотѕӢау</һ2> 
<р>Ѕкеріісѕ ѕиддеѕзі ...</р> 


</аіу> 
<Ғообег с1аѕѕ="Еооёег"> 
<р с1Іазѕѕ="ЮріѕсІаітег">Тһеѕе ароса1урііс ргейісёіопѕ ...</р> 
<р> <а ҺгеЁ="АрооЕ0ѕ .ҺЕһ1">Ароџі Оѕ</а> 
</р> 
<р>Соругідћі © 2011</р> 
</ Ғообег> 
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В этом примере вместо применяемых ранее элементов <адіу> используются элемен- 
ТЫ <һеадег> И <Ғообег>. Модифицирование большого веб-сайта можно начать с за- 
ключения существующих элементов <аіу> в соответствующие контексту элементы 
НТМІ5. 


Обратите внимание, что элементы <һеадег> И <Ғооіег> продолжают использоваться 
совместно с названиями классов. Таким образом, не нужно немедленно вносить 
исправления в таблицы стилей. Но названия классов кажутся избыточными, поэто- 
му их лучше убрать: 
<Беааег> 

<р1>Ном Бе Мог1А Соџ1а Епа</һћ1> 

<р с1Іаѕѕ="Теаѕег">5сепагіоѕ Раф ѕре11 һе епа оЕЁ 11Ёе аз ме Кпои</р> 


<р сІаѕѕ="Ву1іпе">ру Вау М. Сагпаііоп</р> 
</ћеайег> 


Так как у страницы только один верхний колонтитул, его можно выделить именем 
элемента. В следующем листинге приведена модифицированная таблица стилей, 
которая форматирует все элементы <Һћеайег>: 


/* Форматируем <Беа4ег> (как блок с рамкой и синей заливкой.) */ 
Һеааег { 


/* Форматируем все заголовки <р1> в элементе <ћеадег> 
(заголовок статьи). */ 
Һеааег Һһ1 { 


/* Форматируем подзаголовок в элементе <һеадег>. */ 
һеааег .Теаѕег { 


/* Форматируем строку с именем автора в элементе <һеайег>. */ 
Һеадег .Ву1іпе { 


} 


Оба подхода одинаково действенные. Такая гибкость, без необходимости следовать 
жестким правилам, в НТМІ5 присуща многим решениям по разработке веб- 
страниц. 


Обратите внимание на блок <аіу>, оставшийся в содержимом. Это вполне допусти- 
мо, т. к. НТМГ.5-страницы часто содержат смесь семантических элементов и более 
общего контейнера <аіу>. Так как в НТМГ5 не существует отдельного элемента для 
содержимого, такого как, например, <сопеепе>, то значение обычного элемента 
<аіу> остается понятным. 
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ПРИМЕЧАНИЕ 


Данная веб-страница в ее настоящем виде не будет отображаться правильно в 
Іпіегпеї ЕхрІогег более ранних версий, чем версия ІЕ 9. Чтобы решить это проблему, 
необходимо применить простое обходное решение, рассматриваемое в разд. "Брау- 
зерная совместимость для семантических элементов" далее в этой главе. Но сна- 
чала ознакомьтесь еще с несколькими семантическими элементами, которые могут 
улучшить разметку страниц. 


Наконец, есть еще один элемент, который стоит добавить в этот пример. Это эле- 
мент <агЕ1с1е>, который представляет завершенную, самодостаточную единицу 
содержимого, например запись в блоге или новостную заметку. Элемент <ахЕ1с1е> 
обрамляет заголовок, строку с именем автора и основное содержимое. Добавив 
элемент <акЕ1с1е> к разметке, получим следующую структуру: 


<агііс1Іе> 
<Һеайег> 
<һ1>Ном һе Мог1а Соџ1а Епа</һ1> 


</ЉҺеайег> 

<аіу с1азѕ="Сопіепё"> 
<р><ѕрап сІаѕѕ="Іеааїп">Бідһі пом</зрап>, уоџ'ге ргорар1у ...</р> 
<р>...</р> 
<Һ2>Мауап роотѕӢау</һ2> 
<р>5КерЕ1сз ѕиддеѕі ...</р> 

</аіу> 

</аг+іс1е> 


<Ғооїег> 
<р сІаѕѕ="ріѕсІаітег">Тһеѕе ароса1урЕ1с ргедісііопѕз ...</р> 


</Еоофег> 


Конечная структура страницы показана на рис. 2.3. 


Веб-страница 


Рис. 2.3. Модифицированная разметка 
содержит три семантических элемента 
НТМЕ5. Если логика старой структуры 
была такой: "Вот страница, разбитая на 
три раздела", то новая структура говорит: 
"Вот статья, в которой имеется нижний 
«юоїењ и верхний колонтитулы" 


<айісіе> 


<һеадег> 
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Хотя новая разметка отображается в браузере точно так же, как и старая, сама раз- 
метка содержит довольно много дополнительной информации. Например, загля- 
нувший на ваш сайт поисковый робот по элементу <агЕ1с1е> может быстро разо- 
браться, где находится содержимое страницы, а по элементу <ћеадег> — где заго- 
ловок содержимого. Элемент <ғооёег> не будет представлять для него интереса. 


ПРИМЕЧАНИЕ 


Иногда статья может быть разбита на несколько веб-страниц. В настоящее время дос- 
тигнуто соглашение, которое гласит, что каждая такая часть статьи с заголовком 
должна быть облачена в собственный элемент <агііс1ер, хотя она и не завершен- 
ная и не самодостаточная. Этот неуклюжий компромисс — всего лишь один из многих, 
на которые приходится идти, когда семантика встречается с практическими, презента- 
ционными аспектами Интернета. 


Подзаголовки, созданные элементом <Вдгоир> 


В предыдущем примере мы удачно применили элемент <Һеадег>. Но кроме этого 
элемента в НТМТ.5 добавлен еще один элемент для работы с заголовками: <һогоџр>. 
Официальные правила его применения следующие. 


Прежде всего, для обычных отдельных верхних колонтитулов, не имеющих специ- 
ального содержимого, вполне подойдет один из пронумерованных элементов заго- 
ловка — <һ1>, <һ2>, <һ3> и т. д. Например: 


<һ1>Ном ЕБе Мог1Я Соџ1а Епа</һћ1> 


А заголовок и его подзаголовок можно вместе обернуть в элемент <һагоџр>. (Но в 
таком случае не пытайтесь втиснуть туда что-либо другое, кроме пронумерованных 
элементов заголовка, т. е. <һ1>, <һ2>, <һ3> ит. д.) Например: 


<Вагоир> 

<р1>Ном һе Мог1А Соџіа Епа</һ1> 

<р2>5бсепаг1оз іћаё зре11 Ее епа оЕЁ Ііѓе аз ме Кпотк</ћ2> 
</ћагоџр> 


Увесистый верхний колонтитул, т. е., включающий кроме заголовка еще какое-то 
содержимое (например, краткое содержание статьи, дату публикации, имя автора, 
изображение или ссылки на подтемы), можно обернуть в элемент <Һһеааегр>: 


<Һеайег> 

<Һ1>Номт һе Мог1А Соџіа Епа</ћ1> 

<р сІаѕѕ="Ву1іпе">ру Вау М. Сагпаїііоп</р> 
</ћеадег> 


Наконец, если увесистый колонтитул также имеет подзаголовок, то чтобы обозна- 
чить дополнительное содержимое, элемент <һодгоџр> нужно вставить в элемент 
<Һеайег>: 
<Һеайег> 
<Вагоир> 
<51>Ном ЕБе Мог1а Соџ1а Епа</һћ1> 
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<һ2>8сепагіоѕ ЕВаф зре11 ЕВе епа оё 11Ее аз ме Кпои</һћ2> 
</Љагоџцр> 
<р с1аѕз="Ву1іпе">ру Вау М. Сагпаііоп</р> 
</ћеадег> 


Это, конечно же, несколько модифицированное содержимое из предыдущего при- 
мера: вместо элемента <р> подзаголовок обозначен элементом <һ2>. 


С первого взгляда такая разметка может показаться потенциально сбивающей 
с толку. С точки зрения структуры она могла бы подразумевать, что все последую- 
щее содержимое является частью подраздела, который начинается с заголовка вто- 
рого уровня, что не имеет особого смысла. В конце концов, кому нужна статья, со- 
стоящая целиком из одного большого подраздела? И даже если такая структура не 
влияет на отображение страницы в браузере, она меняет принцип создания схемы 
документа браузерами и другими инструментами (см. разд. "Система НТМІ5 для 
создания схемы документа" далее в этой главе). 


К счастью, эта проблема решается автоматически элементом <ћогоџр>. В структур- 
ном аспекте он обращает внимание только на заголовки верхнего уровня (в данном 
случае это <һ1>). Другие заголовки отображаются в браузере, но они не включаются 
в схему документа. Такое поведение вполне логично, т. к. эти заголовки предназна- 
чены для обозначения подзаголовков, а не подразделов. 


Вставка рисунков с помощью элемента <Йдиге> 


Многие веб-страницы оформляются изображениями. Но концепт рисунка несколь- 
ко иной, чем изображения. Спецификация НТМТ.5 советует рассматривать рисунки 
во многом подобно рисункам в книге, иными словами, изображение, отдельное от 
текста, но на которое в тексте делаются ссылки. 


В общем, рисунки размещаются как плавающие объекты, т. е. их вставляют в пер- 
вое удобное место в тексте, вместо того чтобы закреплять возле конкретного слова 
или элемента. Часто рисунки снабжены подписями, которые плавают вместе 
с НИМИ. 


В следующем листинге показан пример разметки НТМЕ, которая добавляет рису- 
нок к статье об апокалипсисе. (Код разметки также включает абзац непосредствен- 
но перед рисунком и абзац сразу же за ним, чтобы можно было видеть, как именно 
рисунок вставляется в разметку.) 


<р><ѕрап с1аѕѕ="Іеааїп">Кідћі пом</зрап>, уоџ'ге ргоба Лу ...</р> 


<аіу с1азз="Е1оа Е1даге"> 
<1и9 згрс="Һотап $Ко11.)рд" а1ё="Нитап ѕко11"> 


<р>й111 уои ре һе 1азЕ регзоп ѕзёапдіпд 1# опе оЕЁ іһеѕе 
ароса1урЕ1с зсепаг1оз р1ауз оџё?</р> 
</ӣіу> 


<р>Воё дӢоп' де ёоо эпид ...</р> 
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В разметке подразумевается, что для размещения рисунка используется правило в 
таблице стилей, которое также устанавливает поля, управляет форматированием 
подписи к рисунку и, необязательно, создает вокруг него рамку. В следующем лис- 
тинге приведен пример такого правила: 


/* Форматируем блок плавающего рисунка. */ 
.Е1оаіЕідоге { 

Ғ1оа+: 1еЕЕ; 

пага1п-1еЕ%: 0рх; 

пагдіп-ёор: 0рх; 

пагдіп-гідһі: 20рх; 

пагадіп-роіёот: 0рх; 


/* Форматирует текст подписи к рисунку */ 
.Е1оаіҒісдиге р { 


тах-міаёһ: 200рх; 
Ғопі-ѕіхе: зта11; 
Ғопі-зіу1Іе: іба11с; 


пагдіп-роіёотм: 5рх; 


} 


На рис. 2.4 показана работа этого кода. 


д. 1 


8] АросаурзеРаде Вемзед.нии О > > Ж | @ Аросаіурзе Мом 


Ном {пе Могіа Соиіа Епа 


КІСНТ МОМ, уоцте ргоБаЫу ѓееЇіпо ргеНу воо4. АЌег ај], Ше іп ће 4еуеюре4 мой 
15 сотѓогїаЫе—ргођаЫу тоге сотќѓог+аЫе {пап И'5 Бееп юг {Ве ауегазе итап Бешта 
ћгоџсћоиѓ а оЁгесог4еа 1зтогу. 


Виї аоп'ї сеї їоо зтия. Тһеге'ѕ 5] 
репу оЁһогтійс уаузѕ і соша аП ға] 
арагї. [п {515 агіісе, уоц'еагп або а 
ему оЁРопг ѓауогіїеѕ. 


Мауап Роотѕӣау 

ЅКеріісѕ ѕироеѕї ћаї ће Мауап саіепааг 
зітріу гої їо а пем 5,126-уеаг ега айег 
2012, апа аоеѕп'ї асїџаПу ргейісї а іѓе- 
епӣіпє ароса!урзе. Виї ріуеп па ће 
]оп8-4еаЯ Мауапѕ уеге утопо арои 
уігца]у еуегу па е!ѕе, уһу зВош Я уе 
їгиѕі ет оп 15? 


М уси Бе йе Іаѕ регзоп ѕѓапӣілд 

{фопе оў ћеѕе аросајуріс ѕсепағіоѕ БКоЬої ТаКеоуег 

ріауѕ ошё? М№ої диіќе аз ёгісћепіпс аз а Уатріге 
ТаКеоуег ог Цуіпе-Реай ТаКеоуег, а 

горо! геБеШоп 1$ 511 а 91зашеНия ћоцрћ. Ме аге аігеайу оцелитеге4 Бу оиг 

1есппооз1са| дайсеїѕ, ап еуеп ВШ Саѓеѕ {еагз ће дау һіѕ Јарапеѕе гоЪо! $]ауе гигиз 


Рис. 2.4. Теперь статья украшена рисунком. В разметке рисунок определен сразу же за первым абзацем 
текста, поэтому он плавает слева от следующего текста. Обратите внимание, что ширина подписи 
к рисунку ограничена, чтобы создать красивый, плотный абзац 
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Если вам уже приходилось раньше создавать подобный код для вставки рисунка, 
то, возможно, будет интересно узнать, что НТМГ.5 предоставляет новые семанти- 
ческие элементы, которые идеальным образом подходят для данного типа задач. 
В частности, вместо использования банального элемента <аіу> для контейнера ри- 
сунка можно использовать элемент <ғісиоге>. А текст подписи к рисунку помещает- 
ся в элемент <ғіссарєіоп> внутри элемента <ғісиге> следующим образом: 


<Е1ааге с1аз5="ЕР1оаЕЕ1одаке"> 
<1и9 эгс="Битап $Ко11.)рд" аїё="Нитап зКо11"> 


<Ғідсарііоп>іїі11 уой ре Пе 1аѕі регзоп збапа1па ії опе оѓ 
{Безе ароса1урііс зсепаг1оз р1ауз оџі?</ ісдсарёіоп> 


</Е1ачиге> 


Конечно же, решение использовать ли таблицу стилей для размещения и формати- 
рования блока рисунка остается за вами. (В данном примере это означает, что нуж- 
но изменить селектор выбора стиля, определяющий текст подписи к рисунку.) Сей- 
час в нем используется .Е1оаіҒісдиоге р, НО ДЛЯ модифицированного примера требу- 
ется .Р1оаїҒісдиге Ғідсарііоп. 


СОВЕТ 


Обратите внимание, что элемент <Е1дихе> продолжает форматироваться на основе 
своего названия класса (Е1оаёҒісиге), а не типа элемента. Это потому, что вы, ско- 
рее всего, захотите форматировать рисунки не одним, а несколькими способами. На- 
пример, может быть, вы захотите расположить рисунки слева, справа, с разными по- 
лями или параметрами подписи и т. п. Для такой гибкости рисунки следует формати- 
ровать с помощью классов. 


В браузере рисунок продолжает отображаться точно таким же образом. Разница в 
разметке заключается в том, что теперь она совершенно понятна. (Кстати, возмож- 
ности элемента <Е19сарЕ1оп> не ограничиваются содержанием текста, в него можно 
помещать любые имеющие смысл элементы НТМІ, включая ссылки и пикто- 
граммы.) 


Наконец, стоит отметить, что в некоторых случаях подпись к рисунку может со- 
держать полное его описание, что делает текст атрибута а1+ избыточным. В таком 
случае атрибут а1Е можно удалить из элемента <1та>, как показано в следующем 
коде: 


<Ғісдоге сІаѕѕ="Е1ІоаіЕідиге"> 

<1и9 эгс="Һотап ѕки11.јрд"> 

<Е1дсарЕ1оп>А ВБамап ѕКки11 11ез оп Ве запа</ Ғідсарііоп> 
</ Ғісиге> 


Только ни в коем случае не удаляйте альтернативный текст, заменив его пустой 
строкой, Т. К. ЭТО будет означать, что рисунок является чисто презентационным и 
программы чтения экрана должны игнорировать его. 
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Добавление боковой панели 
с помощью элемента <а$/ае> 


Новый элемент <аѕіаде> представляет содержимое, которое по смыслу связано с ок- 
ружающим его текстом. Например, его можно использовать как врезку в печатной 
работе, чтобы ввести связанную тему или развить вопрос, исследуемый в основном 
документе. Логично применять элемент <аѕіаде> также в случаях, когда нужно где- 
то примостить блок объявлений, несколько ссылок на связанное содержимое или 
даже броскую цитату во врезке, подобно показанной на рис. 2.5. 


|8] АросаіурѕеРаде Кеуіѕей.Мті О > ә Ж | [1 Аросаіурѕе Мом 

а гобої гереШоп 1$ $ а аіѕдціейпро ћоцсћї. Ме аге агеаЧу 
оціпитђегеа Бу опг їесһпо]осіса! вайреїѕ, апа еуеп В Саѓеѕ Ёеагѕ ће 
Дау һіѕ Јарапеѕе гоһоѓ 51ауе гагиз һіт оуег Бу һе апКіеѕ апа азК$ (іп а 
ѕиіќаЫу гођоібс уоісе) "МЋо'ѕ уоиг дайду поуу?" 


Опехріаіпей 5іпешагіќу 


Үе 4оп"+ Кпому Бом #ће 7а 6 И/е аоп Е Кп Ом 


ипіуегѕе ѕќагїед, зо ме 


сап' Бе ѕиге ії мгоп"+ јиѕі ром Ее ип Імеүѕе 


епа, тауђе їодау, апа 


тауђе мВ поте тое с] гіеа, $0 ме сап Е ре 


ехсИте ап а рий оЁапі- 


та{ег апа а 51іеһё Я22118 5иге ІЁ Моп Е јиѕё епа 


поіѕе. 


Кипамау Сітаќе Сһапсе т ауђе {о аау. 9 9 


Ріѕтіѕѕеа Бу зоте, А] 

Соге'ѕ ргорһесу оѓ 4оот 

тау 511] соте тие. {И 4оез, уе тау һауе {о сопѓепа мі уісіоцѕ 
зтотгтпз, ууійеѕргеаа ѓооа ѕһогѓареѕ, апа ѕиг]у аіг сопііопіпе гераігтеп. 


С1оЪа! ЕрЧепис 
Ѕоте {йе іп Һе Ёиёиге, а 1е Ва] уігиѕ со ѕігіке. Рге@1сНопз і ег 


Рис. 2.5. Метод размещения во врезке броской цитаты позаимствован из книжной области. 
Такая цитата привлекает внимание читателя и выделяет важное содержимое 


Этот эффект можно с легкостью создать с помощью хорошо приработанного эле- 
мента <аіу>, но элемент <аѕіае> предоставляет более осмысленный способ делать 
разметку того же самого содержимого: 


<р>...(іп а ѕџиібар1у гороёіс уоісе) "Кћо'ѕ уоџг даайу пом?"</р> 


<аз14е с1аѕѕ="Ри110иоіе"> 
<іпо згс="дџоёеѕ збагі.рпод" а1ё="Оџоёе"> 


Ме аӢоп'+ Кпом Бом ЕБе ип1уегзе зёагіеа, зо ме сап'і ре зиге іі 
моп' јиѕі епа, тауре іоаау. 


<іпо згс="дџоёеѕ епа.рпод" аїё="Епа аџобе"> 
</аѕійе> 


<һ2>0пехр1аіпеа Ѕіпао1агіёу</һ2> 
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В этот раз таблица стилей врезает плавающую цитату справа: 


.Ри1100о{е { 

Ғ1оаї: гідһі; 

пах-міаёћ: 300рх; 

рогаег-іор: іп р1Іаск зо11а; 
рогаег-роёёот: Ёһіск р1Іаск зо1іа; 
Ғопё-ѕіле: З0рх; 

Ііпе-һеідћё: 130$; 

Ғопі-зіу1е: іба1іс; 
раааіпад-ёор: 5рх; 


раааіпсд-роёёом: 5рх; 
пагдіп-ІеЁё: 15рх; 
пагдіп-роёёот: 10рх; 

} 

.Ро110ооёе ітд { 
уегёіса1-а1ісдп: роёіот; 


Браузерная совместимость 
для семантических элементов 


Пока все наши примеры использования новых возможностей НТМГ.5 выглядят не- 
плохо. Но результаты не будут такими воодушевляющими, если просмотреть нашу 
страницу в старых браузерах. Однако прежде чем заняться этим вопросом, стоит 
выяснить, какие браузеры предоставляют поддержку простых чисто семантических 
элементов. Эта информация предоставлена в табл. 2.1. 


Таблица 2.1. Поддержка браузерами семантических элементов 


СЕСЕ 


Минимальная Еа 
версия 


Как видим, ситуация в этой области не очень утешительная. К счастью, эта про- 
блема из разряда легко решаемых. Ведь семантические элементы по сути ничего не 
делают. Все, что нужно браузеру делать для их поддержки, — это обрабатывать их 
как обычный элемент <аіу>. Но для этого нам нужно решить две проблемы. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Как создавались семантические элементы 


Прежде чем приступить к созданию НТМІ5, его разработчики долго и тщательно изу- 
чали бесчисленное множество веб-страниц. Но они не просто просматривали попу- 
лярные сайты, а изучили собранные Соодіе статистические данные на свыше одного 
миллиарда веб-страниц. (Вы можете сами просмотреть эти данные на сайте 
ћир://соде.доодіе.сот/^мебѕѕіаїѕ. Но для просмотра лучше пользоваться не Іпќегпеї 
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Ехріогег, т. к. этот браузер не способен отобразить все стильные диаграммы и графики 
этого сайта.) 


Компания Соодіе проанализировала собранные ею данные и составила список назва- 
ний классов, используемых веб-разработчиками в своих страницах. Идея состояла 
в том, что название класса может указать на назначение элемента и предоставить по- 
лезную информацию о том, каким образом разработчики структурируют свои страни- 
цы. Например, если у всех в разметке есть элемент <адіу>, в котором используется 
класс с названием һеааег, тогда будет логичным допустить, что все разработчики по- 
мещают в свои веб-страницы верхние колонтитулы. 


Первое, что исследователи компании Соодіе узнали, было то, что в подавляющем 
большинстве страниц названия классов (или вообще таблицы стилей) не используют- 
ся. Далее они составили короткий список наиболее часто употребляемых названий 
классов. Среди прочих, самыми популярными были такие названия классов, как ѓооѓег, 
һеааег, тепи, пау, которые хорошо соответствовали новым семантическим элементам 
НТМЕ5 <ғооёег>, <реааег> и <пау>. Некоторые другие названия классов — такие как 
ѕеагоһ и соругідћһі — подсказывают возможные соответствующие семантические эле- 
менты. 


Иными словами, Интернет изобилует одинаковыми базовыми дизайнами, например, 
страниц с верхним колонтитулом, нижним колонтитулом, боковыми панелями и меню 
навигации. Но при этом каждый разработчик смотрит немного по-своему на способ 
решения одной и той же задачи. От этого осознания всего лишь небольшой шаг к ре- 
шению того, что в язык НТМЁ можно добавить несколько новых элементов разметки, 
которая и так уже создается всеми разработчиками. Вот это озарение и вдохновило 
создание семантических элементов НТМІ5. 


Первым делом нам нужно преодолеть привычку браузера рассматривать все неопо- 
знанные им элементы, как встроенные. Большинство семантических элементов 
НТМІ5 (включая все элементы, которые мы рассмотрели в этой главе, за исключе- 
нием элемента <Е1пе>) являются блочными элементами. Это означает, что их нужно 
отображать в отдельной строке, с небольшим расстоянием между ними и предше- 
ствующими и следующими элементами. 


Браузеры, которые не распознают элементы НТМГ5, не знают, что некоторые из 
этих элементов следует отображать как блочные, вследствие чего они, скорее всего, 
сбросят эти элементы в одну беспорядочную кучу. Чтобы решить это проблему, 
нужно просто добавить одно новое правило в таблицу стилей. Далее приведен код 
для суперправила, которое одним махом применяет форматирование блочного ото- 
бражения к девяти требующим его элементам НТМІ5: 


агііс1іе, азлае, Е1ааге, Ғідсарііоп, Ғооіег, һеадег, Боаготр, 
пау, ѕесііоп, зитпагу { 
аіѕр1іау: р1оск; 

} 


Это правило таблицы стилей никаким образом не будет влиять на браузеры, кото- 
рые уже понимают НТМІ 5, т. к. свойство аіѕріау уже имеет значение р1оск. Также 
оно не будет влиять ни на какие правила, которые уже используются для формати- 
рования этих элементов, т. к. они будут продолжать применяться в дополнение 
к этому суперправилу. 

Этот метод решает проблему распознавания семантических элементов в большин- 
стве браузеров, но в это большинство не входят Пете ЕхрІогег 8 и более старые 
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его версии. Здесь нужно решить вторую проблему, заключающуюся в том, что эти 
версии [Е отказываются применять форматирование таблицы стилей к элементам, 
которые они не распознают. К счастью, эта проблема решается с помощью неболь- 
шого трюка: браузер 1Е можно обмануть и заставить его распознавать чужие ему 
элементы, зарегистрировав их с помощью команды Јауа$Ѕсгірі. Например, в сле- 
дующем ЈауаЅсгірі-коде браузер ІЕ наделяется способностью понимать и приме- 
нять стиль к элементу <Ъеадег>: 


<ѕсгірё> 


аосомепе. сгеаёеЕ1етепі ('һеааег!) 


</ѕсгірё> 


Но вместо того чтобы самому разрабатывать такой код для всех элементов, можно 
воспользоваться уже готовым сценарием, ознакомиться с которым можно на сайте 
Һер://бпуигі.сот/лісјхт. Чтобы использовать этот сценарий, просто вставьте 
ссылку на него в блок <ћеаа> разметки: 


<Һеаа> 
<Е161е>...</611е> 
<ѕсгірі 
згс="Һеёр: / /ҺЕт15ѕһіт.доод1есоде . сот/ ѕуп/ Египк/Һет15.ј="></ѕсгірё> 


<һеаа> 

Этот код загружает сценарий с веб-сервера һёті55һіт.оооғесойе.сот и исполняет 
его, прежде чем браузер начинает обрабатывать остальную разметку страницы. 
Этот простой и краткий сценарий применит рассмотренный выше Гауабспр-код 
для элемента <пеаадег>, с соответствующими изменениями, ко всем новым элемен- 
там НТМГ$, что позволяет форматировать их с помощью правил таблиц стилей. 
Добавьте в таблицу стилей приведенное ранее суперправило, и новые элементы 
будут отображаться должным образом, как блочные элементы. Вам только остается 


использовать новые элементы и добавить собственные правила таблицы стилей для 
их форматирования. 


Кстати, сценарий Һт15.ј5 исполняется, только если он определит, что используется 
старая версия Іпќегпеі ЕхрІогег. Но если вы хотите вообще избежать накладных рас- 
ходов, связанных с ненужным вызовом сценария Јауа8сгір, можно в ссылку на 
него добавить соответствующее условие, как показано в следующем коде: 
<!--[1Е 16 ТЕ 9]> 

<ѕсгірё 

згс= "Һр: / /Һіт155һітм.доод1есоде.сом/ зуп/Егопк/һҺіт15.ј5"></ѕсгірё> 

<! [епаіғ] --> 


Таким образом, не нуждающиеся в нем браузеры (Е 9 и более поздние версии) 
будут игнорировать эту команду, что сэкономит несколько миллисекунд на испол- 
нении кода разметки страницы. 


Наконец, стоит отметить, что обычно Іпіегпеї ЕхрІогег блокирует попытку исполне- 
ния файла страницы с диска локального компьютера. Это означает, что вместо ото- 
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бражения страницы ІЕ выведет свою пресловутую панель безопасности, сообщая в 
ней о блокировке этого сценария. Чтобы исполнить сценарий, нужно щелкнуть по 
этой панели безопасности и в открывшемся диалоговом окне разрешить исполне- 
ние активного содержимого. 


Хотя эта проблема не проявляется при исполнении файла страницы с веб-сервера, 
при локальном тестировании это, определенно, раздражает и отвлекает от главного. 
Решением будет добавить метку МОТУ в начале страницы, как описано в конце 
разд. "Добавление Јауахсгірі-кода" главы 1. 


СовеТ 


Альтернативным решением проблемы семантических стилей будет использование 
инструмента Модегпігг (см. разд. "Определение возможностей с помощью Модети!" 
главы 1). Он автоматически решает эту проблему, не требуя применения сценария 
ті5.јѕ или правила таблицы стилей. Поэтому, если вы уже используете Модегтйг 
для определения поддержки браузером определенных возможностей, можно считать 
проблему семантических стилей решенной. 


Разработка сайта 
с использованием семантических элементов 


Добавление семантических элементов в простую страницу, подобную документу, 
не составляет труда. Добавление их в завершенный веб-сайт ничуть не сложнее, но 
здесь возникает намного больше вопросов. А так как НТМГ5 является, по сути, не- 
изведанной территорией, имеется лишь небольшое число соглашений (но большое 
число обоснованных расхождений во мнениях). Это означает, что при выборе меж- 
ду двумя возможными подходами к выполнению разметки, которые оба полностью 
отвечают требованиям стандарта НТМІ 5, вам нужно самому решать, какое из них 
больше подходит для вашего содержимого. 


В этом отношении, на рис. 2.6 показан более амбициозный пример страницы, соз- 
дание которой мы рассмотрим далее. 


В данном случае рассмотренная нами ранее одностраничная статья помещена в за- 
вершенный веб-сайт, структурированный по содержимому. Верх страницы содер- 
жит верхний колонтитул сайта, под которым размещено содержимое страницы. Ле- 
вая боковая панель содержит элементы навигации, информацию о хозяине сайта 
(Арооќ 05) и рекламное изображение. 


Верхние колонтитулы 


Элемент <һеайег> используется в двух похожих ситуациях. Первая, когда дается 
верхний колонтитул какому-либо содержимому, а вторая, когда дается верхний ко- 
лонтитул веб-странице. Иногда эти две задачи перекрываются, как в примере с от- 
дельной статьей, показанной на рис. 2.1. Но в других случаях приходится иметь 
дело с веб-страницей, которая имеет как верхний колонтитул страницы, так и один 
или несколько блоков содержимого со своими верхними колонтитулами. Пример 
такой страницы и показан на рис. 2.6. 
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| О дросаурзе Тоду | + - 
©) Э (0 не//СУ/НТМЕ/Свариег О2/Аросаурзебие.Ныт! с ® 9: 


1 
АВЕ ҮОЏ ВЕАрү РОВ... РМ.» - Ц 2 


Ароса1урѕе 77 


Агіісіеѕ =| 
« Ном Тьемона Соша ва Ном Фе Мона Соша Епа 
• Уоша АЦепз Епз]ауе ог Ѕсепагіоѕ ћаї ѕре!! Һе епа оЁ Ш аѕ ме Кпоуу 
Егабісаќе 05? Бу Кау М. Сатайоп 
• Сгезі Ғ1оойз оѓ ће Раз 
* Сошӣ Спетофегару Саизе ВІСНТ МОМ, уоц’ге ргођаЫу ѓееіпо ргену соо. АЌег а, іе іп ће 4еуе!ореа 


се мой 15 сотомае— ргоБаЫу тоге сотѓогіаЫе ап #'5 Бееп ѓог ће ауегазе 


Е ааа Битап Бешта һгоџвћһоиѓ а] оЁгесог4е4 һіѕіогу. 
• Моге... 
Ви доп” веї їоо тия. Тһеге'ѕ 5 
решу оЁһоггійс мауѕ ії сош@ ај] #а1 
арагі. ш {15 агіісіе, уои" Іеагп афоцё 
а ем оЁ оиг ѓауогіќеѕ. 


АБоиї 05 


Ароса1урзе Тодау із а мона 1еадег 
іп сопзрігасу феогіез, йошг 
ргейісіопз, апа рапіс-зргеайіпв. 
'Опг тойо 15 "Бе ргерагей {ог еуегу 
роз ИИу (ехсері ће воой опез).„" 


Мауап ОоотѕӣӢау 
ЗКерЧс$ зирвез{ іћаї ће Мауап 
саепдаг ѕітр]у го|з їо а пем 
5,126-уеаг ега айег 2012, апі 
доеѕп' асіџаПу ргейісї а Ше-епд та 
аросаурзе. Виї еп іһаї ће 

Ой 1оп2-4еа4 Мауапз уеге угопв або 
ИЛПуои Бе ёе 1а5ё регзоп ѕёапіїпд уігішаПу еуегуйи с е]зе, мһу звошШа 


іҒопе оў пезе аросајуріс зсепатоз ооо НН 
ріауѕ си? 


Коћої ТаКеоуег | 
Мог аийе аз ісћѓепіпо аѕ а Уатріге ТаКеоуег ог Мушта-Оеа4 Такеоуег; а гобой | 
геђеШоп іѕ = а іѕдціейпр ћоцоћї. Ме аге агеа4у оџіпитђегеа Ьу оиг 
тесһпоЇовіса! райсеїѕ, апа еуеп ВШ Саѓеѕ {еагз ће дау һіѕ Јарапеѕе гобої ауе 
тигпѕ һіт оуег Бу ће апНез апа азКз (іп а ѕиќаЫу гођойс уоісе) "Мћо'ѕ уоџг 
даайу пом?" 


Опехріаіпеа $твщагиу 


Ме доп” Кпом һом ће ипіуегѕе 6 [4 Ие аоп ИЯ Кпом в 


Рис. 2.6. Страница НТМЕ5 с более сложной структурой 


Эта ситуация несколько посложнее тем, что соглашения по использованию элемен- 
Та <һеадег> зависят от его роли. Для содержимого мы, скорее всего, верхний колон- 
титул применять не будем, если только он не требуется по какой-либо причине. 
А единственной причиной, по которой он может потребоваться, будет создание так 
называемого "увесистого" верхнего колонтитула, т. е. колонтитула, содержащего 
кроме заголовка дополнительную информацию. Если же требуется обычный заго- 
ловок, лучше всего использовать отдельный элемент <һ1>. Если требуется только 
заголовок с одним или несколькими подзаголовками, можно использовать сам эле- 
мент <вахопр>. Но если нужно добавить прочие подробности, имеет смысл облачить 
весь "пакет" в элемент <Һеадег>, как рассматривается в разд. "Структурирование 
страницы с помощью НТМЕ5" ранее в этой главе. Но, создавая верхний колонти- 
тул для веб-сайта, многие разработчики оборачивают его в элемент <ћеайег>, даже 
если он не содержит ничего, кроме заголовка в рамке с С585-форматированием. 
В конце концов, это один из основных аспектов дизайна веб-сайта, и кто его знает, 
может быть, когда-либо придется добавить в него что-то новое. 


Вывод следующий: страницы могут иметь несколько элементов <веадег> (и часто 
будут иметь их), даже если они играют разные роли на странице. 
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НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Превращение веб-страницы в веб-сайт 


На рис. 2.6 показана отдельная страница гипотетического веб-сайта. 


Страницы настоящего веб-сайта, которых может быть от нескольких единиц до не- 
скольких десятков, будут иметь такую же организацию и такую же боковую панель. 
Единственная разница между всеми этими страницами будет в их основном содержи- 
мом, которым в данной странице является статья. 


В НТМІ5 нет какой-либо волшебной палочки для превращения веб-страницы в веб- 
сайт. Поэтому приходится использовать те же приемы и методы, что и в традицион- 
ном НТМІ. 


® Серверные инфраструктуры. Эта простая идея заключается в следующем. Когда 
браузер запрашивает страницу, веб-сервер собирает ее из отдельных частей, 
включая общие элементы (такие как меню навигации) и конкретное содержимое. 
Это наиболее распространенный подход и единственный, который следует ис- 
пользовать для больших, профессиональных веб-сайтов. Этот подход реализуется 
массой разных способов разнообразных технологий, от устаревших расширений на 
серверной стороне до платформ развитых веб-приложений (таких как АЗР.МЕТ 
и РНР) и систем управления информационным наполнением (таких как Огира! и 
ҮогаРгеѕѕ). 


® Шаблоны страниц. Мощные инструменты для создания и редактирования веб- 
страниц, такие как Огеатмеауег и Ехргеѕѕіоп Мер, содержат средство для созда- 
ния шаблонов страниц. Сначала создается шаблон, в котором определяется струк- 
тура веб-страниц, и который содержит информацию, необходимую для вывода на 
каждой странице, например колонтитулы и боковую панель. Потом на основе этого 
шаблона создаются все страницы сайта. Что особенно полезно, т. к. при обновле- 
нии шаблона веб-редактор автоматически обновляет все страницы на его основе. 


Конечно же, вы можете использовать любой из этих подходов, поэтому в данной книге 
основное внимание уделяется конечному результату: собранной вместе разметке, ко- 
торая составляет завершенную страницу, выводимую в окне браузера. 


По сравнению с простой страницей на рис. 2.6 добавлен верхний колонтитул веб- 
сайта. Этот колонтитул состоит из отдельного изображения-баннера, содержащего 
графический текст и изображение. Код соответствующего элемента <ћеадег> вы- 
глядит следующим образом: 


<реаЧег с1аѕѕ="5іёеНеадег"> 
<1и9 зрс="ѕііе 1одо.рпод" а1&="Ароса1урзе Тодау"> 
<Һ1 зѕіуІе="аіѕр1ау: попе">Ароса1урѕе ТодӢау</һћ1> 
</ћеадег> 


Сразу же можно заметить, что этот колонтитул добавляет элемент, который не ото- 
бражается на странице: заголовок, который дублирует текст в изображении. Но на- 
стройка в строке кода скрывает этот заголовок. 


Это поднимает очевидный вопрос: какой смысл в добавлении в разметку заголовка, 
который не отображается в браузере? Как ни странно, этому есть несколько при- 
чин. Во-первых, требуется, чтобы элемент <Һеадег> содержал заголовок какого- 
либо уровня, просто чтобы отвечать требованиям НТМІ5. Во-вторых, такой дизайн 
делает страницу более доступной для людей, которые перемещаются по ней с по- 
мощью программы чтения экрана, т. к. они часто перепрыгивают с одного заголов- 
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ка на другой, не обращая внимания на содержимое между ними. И в-третьих, таким 
образом определяется структура заголовков, которую можно использовать в остав- 
шейся части страницы. Попросту говоря, если вы начнете с элемента <ћ1> для ко- 
лонтитула веб-сайта, то для заголовков других разделов страницы (например 
"АтисІеѕ" и "АБоші 05" в боковой панели) можно использовать элементы <ћ2>. Бо- 
лее подробно этот аспект дизайна рассматривается во врезке "Часто задаваемый 
вопрос. Структура заголовков сайта" далее в этой главе. 


ПРИМЕЧАНИЕ 


Конечно же, можно упростить себе жизнь, создав обычный текстовый верхний колон- 
титул. (И если вам хочется вычурных украшений, можно воспользоваться новой воз- 
можностью С$$3 для встроенных шрифтов, которая рассматривается в разд. "Типо- 
графия для Интернета" главы 8.) Но для многих веб-страниц, которые используют 
заголовок в виде изображения, применение метода скрытия заголовка будет следую- 
щим лучшим решением. 


Создание навигационных ссылок 
с помощью элемента <пау> 


Самой интересной особенностью нашего гипотетического веб-сайта является левая 
боковая панель, которая содержит средства навигации по сайту, дополнительную 
информацию и рекламное изображение. (Обычно для размещения рекламного изо- 
бражения применяется сценарий Јауа$сгірі, который произвольно выбирает рекла- 
му с помощью специальных служб, таких как, например, Соо]е А4Ѕепѕе. Но в 
этом примере место для рекламы просто жестко зарезервировано с помощью кон- 
кретного изображения.) 


В веб-сайте, созданном на традиционном НТМГ, вся боковая панель была бы по- 
мещена в элемент <аіу>. Но в НТМТ.5 для этого почти всегда используются два бо- 
лее специфичных элемента: <аѕіде> И <пау>. 


Элемент <аѕіде> несколько схож с элементом <Һеадег> в том отношении, что он 
имеет тонкое, слегка растяжимое значение. Его можно использовать для обозначе- 
ния единицы несвязанного содержимого, как в случае с броской цитатой во врезке 
в разд. "Добавление боковой панели с помощью элемента <аѕійе>" ранее в этой 
главе (см. рис. 2.5). Также с его помощью можно обозначать совершенно отдель- 
ный блок, т. е. стоящий в стороне от основной структуры страницы. 


ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Структура заголовков сайта 


Допустимо ли иметь на странице несколько заголовков первого уровня? 
Хорошая ли это идея? 

Согласно официальным правилам НТМЁ, можно иметь сколько угодно заголовков 
первого уровня. Но веб-разработчики часто стремятся иметь только один заголовок 
первого уровня на странице, т.к. это улучшает характеристики доступности сайта. 
(Причиной этому является то обстоятельство, что пользователи, просматривающие 
сайт с помощью средств чтения экрана, при переходах с одного заголовка второго 
уровня на другой могут пропустить какой-либо заголовок первого уровня.) Также су- 
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ществует некая позиция веб-мастеров, согласно которой каждая страница должна 
иметь ровно один заголовок, который является однозначным по всему веб-сайту и яс- 
но указывает поисковым движкам, какое содержимое их ожидает. 


В примере на рис. 2.6 используется этот стиль. Заголовок "Аросаіурѕе Тодау" вверху 
сайта является единственным заголовком <ћ1> на этой странице. В других блоках 
страницы, таких как "АгіісІеѕ" и "АБои{ Оѕ" в боковой панели, используются заголовки 
второго уровня. Название статьи также оформлено заголовком второго уровня. (Осу- 
ществив дополнительное планирование, можно варьировать текст заголовка первого 
уровня в соответствии с содержимым текущей статьи. В конце концов, этот заголовок 
не отображается, но может улучшить шансы попадания страницы в результаты более 
уточненного запроса поискового движка, такого как Сооде.) 


Существуют и другие, такие же действенные подходы. Например, можно использовать 
заголовки первого уровня для названий каждого основного блока страницы, включая 
боковую панель, статью и т. п. Альтернативно заголовок веб-сайта можно сделать 
первого уровня, а заголовки боковой панели — второго уровня, но заглавие статьи 
сделать вторым заголовком первого уровня. Все это прекрасно работает в НТМІ5 
благодаря его новой системе создания схемы страницы. Как мы увидим в 
разд. "Блоки" далее в этой главе, некоторые элементы, включая элемент <агііс1е>, 
рассматриваются как отдельные блоки, которые имеют собственные индивидуальные 
иерархические структуры. Поэтому будет совершенно логичным, чтобы в этих блоках 
иерархия заголовков начиналась сначала с помощью нового элемента <ћ1>. (Но стан- 
дарт НТМЕ5 также разрешает начинать новую иерархию заголовков с другого их уровня.) 


Короче говоря, нет одного определенного ответа, какой должна быть структура вашего 
веб-сайта. Выглядит вероятным, что подход с использованием нескольких заголовков 
первого уровня будет все более популярным по мере завоевания Интернета стандар- 
том НТМІ5. Но пока многие веб-разработчики продолжают применять подход с ис- 
пользованием одного заголовка первого уровня, чтобы не усложнять жизнь програм- 
мам чтения экрана. 


Элемент <пау> служит оболочкой для блока ссылок, указывающих на тематические 
разделы текущей страницы или на другие страницы веб-сайта. Большинство стра- 
ниц имеет несколько блоков <пау>. Но не все ссылки требуется помещать в блок 
<пау>; обычно этот блок резервируется для самых больших и наиболее важных раз- 
делов навигации страницы. Например, для списка статей (как на рис. 2.6) опреде- 
ленно требуется блок <пау>. Но, скажем, для пары ссылок внизу страницы на усло- 
вия лицензирования и контактную информацию полноценный блок <пау> не явля- 
ется необходимым. 


Теперь подходящее время попробовать попрактиковаться в использовании этих 
двух элементов. Сначала ознакомьтесь внимательно с содержимым боковой панели 
на рис. 2.6. Потом набросайте на бумаге разметку структуры этого содержимого. 
Далее продолжайте ее разработку с чтением этой главы, чтобы определить наи- 
лучшее возможное решение. 


Содержимое этой боковой панели можно структурировать, по крайней мере, двумя 
способами, которые показаны на рис. 2.7. 


Слева на рис. 27 показано, что всю боковую панель можно рассматривать как па- 
нель навигации, в которую также втиснуто немного другого содержимого. В этом 
случае вся панель может быть взята в элемент <пау>, а для других блоков ее содер- 
жимого использованы элементы <аѕіае> (т. к. эти блоки не связаны с основным со- 
держимым боковой панели, которым являются ссылки). 
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<аѕіде> 


Рис. 2.7. Два способа структурирования содержимого боковой панели 


Альтернативно, как показано на рис. 2.7 справа, всю боковую панель можно рас- 
сматривать как отдельный блок веб-страницы, который имеет несколько назначе- 
ний. В этом случае вся боковая панель заключается в элемент <аз1ае>, а навигаци- 
онные ссылки внутри этого элемента берутся в элемент <пау>. 


Боковая панель нашего гипотетического сайта на рис. 2.6 построена с применением 
второго подхода. Этот подход был избран потому, что в данном случае боковая па- 
нель служит нескольким целям, ни одна из которых не является определенно доми- 
нирующей. Но для боковой панели с большим и сложным блоком навигации (напо- 
добие многоуровневого разворачивающегося меню) и небольшим второстепенным 
содержимым первый подход может быть более логичным. 


В следующем листинге приведен код для структурирования боковой панели, разби- 
вающий ее на три блока: 


<аѕіае с1азз = "Мау51Аераг"> 
<пау> 
<Һ2>Агбіс1Іез</һ2> 
<и1> 
<11><а ргеЕ="...">Ном Тһе Иог1а Сои1а Епа</а></11> 
<11><а ВгеЕ="...">Моп14 А11епз Епз1а\уе ог Егайісаїе 05?</а></1і> 
</џ1> 
</пау> 
<ѕесёіоп> 


<Һ2>Ароџё Оѕ</Һ2> 
<р>Ароса1урзе Тодау іѕ а мог1а Іеайег іп сопзрігасу іһеогіез 
</р> 

</зесЕ1оп> 


<аіу> 
<ітюа ѕэгс="аа.јро" а1ё="Іџскіез сідагеіёе аа: іі'ѕ ёоазіеа"> 

</аіу> 

</аѕіае> 
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Обратите внимание на следующие ключевые моменты. 


О Блоки заголовков ("Агіёісјеѕ" и "Арои 05") являются заголовками второго 
уровня. Таким образом, они явно на более низком уровне иерархии, чем заголо- 
вок веб-сайта первого уровня, что улучшает доступность страницы для про- 
грамм чтения экрана. 


П Ссылки выполнены в виде маркированного списка с помощью элементов 
<0џ1> и <11>. Веб-разработчики сходятся во взглядах, что список является наи- 
лучшим средством для создания наиболее доступного навигационного меню из 
набора ссылок. Но может потребоваться применить правила таблицы стилей, 
чтобы удалить отступы (как было сделано в данном случае) и маркеры списка 
(что в этом примере не было сделано). 


О Блок "Ароиќ 05$" вставлен в элемент <ѕесёіоп>. Этот элемент был использован 
в связи с отсутствием какого-либо другого семантического элемента, более под- 
ходящего для данного содержимого. Элемент <ѕесііоп> более специфичен, чем 
элемент <аіу>; он подходит для обозначения любого блока содержимого, кото- 
рое начинается с заголовка. Если бы существовал более определенный элемент 
для данного контекста, например гипотетический элемент <ароџі>, он бы подо- 
шел лучше, чем базовый элемент <ѕесєіоп>, но такого элемента не существует. 


О Рекламное изображение заключено в элемент <діу>. Элемент <зесЕ1оп> го- 
дится только для содержимого, начинающегося с заголовка, а данный блок изо- 
бражения заголовка не имеет. (Хотя если бы заголовок имелся, например "Слово 
нашим спонсорам", то элемент <ѕесёіоп> был бы лучшим выбором.) С техниче- 
ской точки зрения нет надобности вставлять изображение в какой-либо элемент, 
но использование элемента <а1у> облегчает задачу отделения и форматирования 
этого блока, а также, если необходимо, вставку кода ЈауаЅсгірі для манипулиро- 
вания им. 


Боковую панель можно облагородить дополнительными подробностями, которых 
нет в данном примере. Например, сложные боковые панели всегда начинаются 
с элемента <пеааек> и заканчиваются элементом <Еоокег>. Также они могут содер- 
жать несколько блоков <пау>, например, один для списка заархивированного со- 
держимого, другой для списка последних новостных сообщений, третий для списка 
блогов или подобных сайтов и т. д. Одним из примеров такой панели может быть 
боковая панель типичного блога, битком забитая блоками, многие из которых со- 
держат ссылки. 


Для форматирования боковой панели, созданной с помощью элемента <аз1ае>, 
применяются те же правила таблиц стилей, что и для традиционной боковой пане- 
ли, созданной с помощью элемента <діу>. Эти правила указывают место размеще- 
ния боковой панели методом абсолютного позиционирования, а также другие 
аспекты форматирования, такие как поля панели и цвет фона. Далее приведен при- 
мер такого правила таблицы стилей: 


аѕіаде.Мауѕідераг 

{ 
розіііоп: арзоиіе; 
фор: 179рх; 


Глава 2. Новый способ структурирования страниц 87 


Іе?ї: 0рх; 

раааіпд: 5рх 15рх О0рх 15рх; 
міаёћһ: 203рх; 

тіп-ћеідћё: 1500рх; 
раскагоџпа-со1ог: #еее; 

Ғопі-ѕіхе: зта11; 


} 

Кроме этого правила применяются другие, контекстуальные, для форматирования 
элементов <һ2>, <и1>, <1і> И <ікюо> боковой панели. (Как и для всех других приме- 
ров в этой книге, на странице уүү.ргоѕеѓіесһ.сот/Љіті15 можно загрузить для озна- 
комления код этого примера, включающий полную таблицу стилей.) 


Теперь, когда вы понимаете, каким образом создается боковая панель, можете по- 
смотреть, как она интегрируется в структуру всей страницы (рис. 2.8). 


ПРИМЕЧАНИЕ 

Как мы узнали, элемент <пау> часто используется самостоятельно, а также может за- 
ключаться в элемент <аз1ае>. Есть еще одно место, где он часто встречается: в эле- 
менте <Веааех> колонтитула веб-страницы. 


Веб-страница 


<аѕіае> <айісіе> 


Содержимое 
статьи 


Рис. 2.8. Все семантические элементы сайта апокалипсиса (см. рис. 2.6) 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Создание разворачиваемых блоков с помощью элементов 
<аеЁа115> И <ѕиттагу> 


Несомненно, вы часто видели на веб-сайтах разворачиваемые блоки: разделы содер- 
жимого, которые можно показать или скрыть, щелкнув на заголовке. Создание разво- 
рачиваемого блока является одним из самых легких трюков веб-дизайна, который 
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можно провернуть с помощью базового сценария Јауа$сгірї. Нужно просто отреагиро- 
вать на щелчок по заголовку и изменить параметры стиля, чтобы скрыть блок. Код для 
этого может быть таким: 


уаг рох = досопепі .десЕ1етепеВута ("муВох"); 
рох.зЕу1е.а1$р1ау = "попе"; 


Повторный щелчок отображает блок. Код для этого почти такой же, как для скрытия: 


уаг рох = досопепі .десЕ1ТетепеВутТа ("муВох"); 
рох.ѕіу1Іе.аіѕр1ау = "Б1оск"; 


В этом отношении представляет интерес то обстоятельство, что НТМІ5 добавляет 
два семантических элемента, предназначенных для автоматизации этого поведения. 
Идея заключается в том, что разворачиваемый блок вставляется в элемент 
<аесаі15>, а заголовок блока — в элемент <ѕоттагу>. Получим разметку наподобие 
следующей: 
<Чефа11$> 

<зиптагу>Блок № 1</зитпагу> 


<р>Если вы видите этот текст, блок развернут</р> 
</4ефа113> 


Браузеры, которые поддерживают эти элементы (в момент написания этой книги та- 
кую поддержку предоставляет только браузер Сһготе), показывают только заголовок, 
возможно, украшенный какой-либо безделицей типа небольшого треугольничка рядом 
с заголовком. Когда пользователь щелкает по заголовку, блок разворачивается, пока- 
зывая все свое содержимое. Браузеры без поддержки элементов <дебаі15> и 
<зоптаку> покажут все содержимое с самого начала, не предоставляя пользователю 
никакой возможности свернуть его. 


Отношение веб-разработчиков к элементам <дебаі15> и <ѕоптагу> несколько проти- 
воречивое. Многие из них считают, что эти элементы не совсем семантические, т. к. 
они имеют дело больше со стилем, чем с логической структурой. 


Но пока лучше всего избегать использования элементов <дебаі15> и <зиитагу> из-за 
такого низкого уровня их поддержки браузерами. Хотя можно было бы написать об- 
ходное Јауа$сгірі-решение для браузеров, не поддерживающих этих элементов, но 
для этого потребуется больше усилий, чем для написания нескольких строк ЧауаЗспре 
для выполнения операций сворачивания/разворачивания самостоятельно и к тому же 
на любом браузере. 


Нижние колонтитулы 


Язык НТМІ5 и увесистые верхние колонтитулы были предназначены друг для дру- 
га. В верхние колонтитулы можно не только втиснуть подзаголовки и имя автора, 
но также вставлять изображения, навигационные блоки (с помощью элемента 
<пах>) и практически все, что угодно другое, которому место вверху страницы. 


Как ни странно, НТМІ5 не так услужлив в отношении нижних колонтитулов. По 
его мнению, содержание нижних колонтитулов должно быть ограничено несколь- 
кими основными подробностями, такими как авторские права, авторство, правовые 
ограничения и отдельные ссылки. Нижние колонтитулы не должны содержать 
длинных списков ссылок, блоков важного содержимого или несвязанных с содер- 
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жимым сайта элементов, таких как реклама, кнопок социальных сетей или элемен- 
тов интерфейса веб-сайта. 


В связи с этим возникает следующий вопрос: что делать, если дизайн веб-сайта 
требует увесистого нижнего колонтитула? В конце концов, в настоящее время уве- 
систые нижние колонтитулы пользуются большой популярностью в области веб- 
дизайна (см. рис. 2.9 для примера). 


| в Ее) 
С) Аросаурѕе Тодау \= 
С О те///С:/НТМІ5/Сһарїег%2002/ҒаїҒооїег.Һіті х & 


АВЕ УОЦ ВЕАрү РОВ... А5 = 


Ароса1урѕе Е 


Агіісіеѕ 
ЕЕЕ Ном {ће Мог1а Соша Епа 
• МошаАНенз Епз]ауе ог Ѕсепагіоѕ ћаї зре! Һе епа оѓ Ше аѕ уе Кпом 
Егадісаќе 057? Бу Кау №. Сатайоп 
• Сгезі Е1оо4з оће Разї 
* ыы Виснт мом, уоц'ге ргоЪаЫу ѓееіпо ргейу роса. АЙег ај, Ше іп ће 4еуе]оре4 мой 


15 сотѓогіаЫе—ргођаЫу тоге сотѓогіаЫе ап іѕ Бееп ѓог һе ауегаве Витап 


УЉу Еуегу тя Уоц Кпом Ароџі В р 
а НН Ъеша ћгоцећоиї а о гесогаеа һіѕїогу. 


Тотћіе АНаскз 15 Мтоп= 
• Моге... 


Виї доп” сеї {оо ѕтие. Тһеге'ѕ = 
рІепѓу оѓ һоггіћс мгауз ії соша а] ға] 


Рис. 2.9. Этот раздутый до абсурда нижний колонтитул напичкан крикливыми побрякушками, наподобие 
изображения о присуждении награды и кнопок социальных сетей. В нем применяется фиксированное 
расположение, закрепляющее его внизу окна браузера, наподобие панели инструментов. Этот 
колонтитул оправдывает лишь одно положительное свойство: кнопка закрытия в правом верхнем углу, 
с помощью которой от него можно избавиться в любое время 


В увесистых нижних колонтитулах используется несколько замысловатых техноло- 
ГИЙ, включая перечисленные далее. 


П Фиксированное позиционирование, чтобы они всегда были закреплены 
у нижнего края окна браузера, несмотря на вертикальную прокрутку страницы. 
На рис. 2.9 показан пример фиксированного нижнего колонтитула. 


П Кнопка закрытия, чтобы пользователь мог закрыть его после прочтения и уве- 
личить область просмотра (см. рис. 2.9). Эта операция реализуется с помощью 
простого сценария ЈауаЅсгірі, скрывающего элемент, в который вставлен ниж- 
ний колонтитул. В качестве примера такого кода может служить код из преды- 
дущего раздела. 

П Полупрозрачный фон, чтобы можно было видеть содержимое страницы сквозь 
нижний колонтитул. Это дает хороший эффект, если в нижнем колонтитуле раз- 
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мещена реклама или важное предупреждение, и обычно используется совместно 
с кнопкой закрытия. 


П Анимация, чтобы колонтитул всплывал или выскальзывал при определенных 
условиях. См., например, диалоговое окно со ссылкой на связанную статью, ко- 
торое выскальзывает с правой стороны экрана при достижении конца статьи на 
уу .пуйтез.сотт. 


Если дизайн вашего веб-сайта требует такого нижнего колонтитула, у вас есть вы- 
бор. Самый простой подход — игнорировать правила. Он не так ужасен, как может 
показаться, т.к. другие веб-разработчики наверняка создают такие же раздутые 
нижние колонтитулы, и со временем официальные правила могут быть ослаблены, 
разрешая эти колонтитулы. Но если в настоящее время вы хотите придерживаться 
требований стандарта, вам нужно немного приспособить свою разметку. К счастью, 
это не слишком трудная задача. 


Трюк заключается в том, чтобы отделить стандартные элементы нижнего колонти- 
тула от дополнительных. В браузере эти элементы будут отображаться как цельный 
нижний колонтитул, но в разметке они не будут относиться к элементу <Еоокег>. 
Например, в следующем листинге показан код для реализации этим методом ниж- 
него колонтитула на рис. 2.9: 


<аіу іа="ҒаЕооег"> 


<!-- Сюда вставляется дополнительное содержимое нижнего колонтитула. --> 
<1и9 опс11ск="С1озеВох ()" згс="с1озе 1соп.рпд" с1азз="С1озеВи®®оп"> 
<Ғообег> 
<!-- Сюда вставляется стандартное содержимое нижнего колонтитула. --> 
<р>Тһе у1емз ехргеѕѕеа оп {015$ ѕііёе ао поі ... </р> 
</Еоофег> 
</аіу> 


Внешний элемент <аіу> не имеет семантического значения. Он просто использует- 
ся, как удобный контейнер для связки дополнительного, "увесистого" содержимого 
со стандартным содержимым нижнего колонтитула. Он также позволяет применить 
следующее правило форматирования из таблицы стилей, фиксирующее увесистый 
нижний колонтитул в одном месте: 


#ҒаЕҒооіег { 
роѕіііоп: Е1хеа; 
робот: 0рх; 
Һеідћ+: 145рх; 
міаёћһ: 100$; 
раскагоџпа: #ЕСр672; 
рогаег-іор: ёһіп ѕо1іа р1аск; 


ЕопЕ-$17е: зта11; 


ПРИМЕЧАНИЕ 


В этом примере правило таблицы стилей накладывает указанное в нем форматирова- 
ние по идентификатору (используя селектор #ЕаіЕооѓег), а не по названию класса 
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(используя, например, селектор .ҒаёЕооѓег). Это потому, что для увесистого нижнего 
колонтитула уже требуется однозначный идентификатор, чтобы сценарий УауаЗспри 
мог найти и скрыть его при нажатии кнопки закрытия. Логичнее использовать этот од- 
нозначный идентификатор в таблице стилей, чем добавлять для этой же цели назва- 
ние класса. 


Как вариант, нижний колонтитул можно также поместить в элемент <аѕіае> с тем, 
чтобы ясно указать, что его содержимое представляет отдельный блок, связанный 
по смыслу с остальным содержимым страницы. Такая структура будет выглядеть 
следующим образом: 


<аіу іа="ЕаёҒооіег"> 


<аѕійе> 
<!-- Сюда вставляется дополнительное содержимо 
нижнего колонтитула. --> 
<іто опс1іск="СІоѕеВох ()" згс="сІоѕе 1соп.рпд" с1азз="С1озеВие®оп"> 
</аѕійе> 
<Ғообег> 
<!-- Сюда вставляется стандартное содержимое нижнего колонтитула. --> 
<р>Тһе у1емз ехргеѕѕеа оп ёһіѕ ѕііе до поі... </р> 
</ Ғооіег> 
</аіу> 


Важным обстоятельством здесь является то, что элемент <Еоокег> не вставляется в 
элемент <аз1ае> по той причине, что элемент <#Ғооёег> относится не к элементу 
<аѕіае>, а ко всему веб-сайту. Если какой-либо элемент <ғооёег> относится к неко- 
торой единице содержимого, его нужно поместить внутри элемента, в который 
обернуто данное содержимое. 


ПРИМЕЧАНИЕ 


Правила и руководства по надлежащему использованию семантических элементов 
НТМІ5 продолжают развиваться. Вопросы о правильном способе разметки больших, 
сложных сайтов порождают горячие споры в НТМЁ-сообществе. Наилучшим советом 
будет следующий: если вы не уверены, что какой-либо метод является правильным, 
не применяйте его. Можно также обсудить этот вопрос на каком-либо сайте, где вы 
сможете обменяться мнением по нему с десятком суперумных НТМЁ-гуру. Одним, 
особенно хорошим, сайтом является сайт НЁр://И т 5досюг.сот, на котором можно 
ознакомиться с продолжающимися дебатами в комментариях к большинству статей. 


Блоки 


Как мы уже узнали, к использованию семантического элемента <ѕесііоп> прибега- 
ют в самом крайнем случае. Например, блок содержимого с заголовком, для кото- 
рого не подходят другие семантические элементы, обычно лучше поместить в эле- 
мент <зесііоп>, чем в элемент <аіур>. 


Но какое содержимое помещается в типичный блок <ѕесііог>? В зависимости он 
конкретной точки зрения, элемент <зесЕ1оп> можно считать либо гибким средством 
для искусного решения многих разнообразных задач, либо кувалдой, которая тоже 
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решает многие задачи, но уже не так искусно. Причиной этому то обстоятельство, 
что в веб-странице элемент <ѕесёіоп> играет разнообразные роли. Он может поме- 
чать любой из следующих видов содержимого: 


П небольшие блоки содержимого, отображаемые вместе с главной страницей, на- 
подобие блока "АБоџ О" в веб-сайте апокалипсиса; 


П автономные блоки содержимого, которые нельзя, по сути, назвать статьей, на- 
подобие счетов клиентам или списка продуктов; 


9 


группы содержимого, например набор статей на сайте новостей; 


П часть документа. Например, в статье об апокалипсисе каждый из сценариев 
конца света можно выделить отдельным блоком. Иногда элемент <ѕесііоп> ис- 
пользуется таким образом для того, чтобы обеспечить правильную иерархиче- 
скую схему документа (см. следующий раздел). 


Два последних пункта списка вызывают удивление. Многие веб-разработчики счи- 
тают использование одного элемента для работы как с небольшой частью статьи, 
так и с целой группой статей недопустимым. Некоторые полагают, что для работы 
с этими двумя разными сценариями НТМІ5 должен иметь, по крайней мере, два 
разных элемента. Но создатели НТМІ5 решили для простоты ограничить количе- 
ство новых элементов, в то же самое время, делая новые элементы насколько воз- 
можно гибкими. 


И последнее, что следует иметь в виду. Элемент <зесЕ1оп> также влияет на иерар- 
хическую схему веб-страницы, понятие которой рассматривается в следующем 
разделе. 


Система НТМЕ.5 
для создания схемы документа 


В НТМІ5 определен набор правил, которые устанавливают требования для созда- 
ния схемы структуры документа для любой веб-страницы. Схема структуры до- 
кумента может быть полезна в разных ситуациях. Например, браузер может пере- 
скакивать с одной части схемы на другую. Или с помощью инструмента для разра- 
ботки веб-страниц можно расположить блоки в новом порядке, перетаскивая и 
оставляя их в нужном месте в окне схемы страницы. Либо поисковый движок мо- 
жет использовать схему страницы, чтобы создать более удобное ее представление 
для предпросмотра. Но наиболее полезной схема будет для средств чтения экрана, 
которые могут использовать ее, чтобы проводить пользователей с ограниченным 
зрением по иерархии разделов и подразделов, имеющей большую глубину вло- 
жения. 


Но ни один из этих сценариев не был еще реализован на практике, т. к. в настоя- 
щее время почти никто не использует схему страницы. Исключение — неболь- 
шой набор инструментов разработки, которые рассматриваются в следующем 
разделе. 
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ПРИМЕЧАНИЕ 


Трудно восхищаться возможностью, которая не влияет на отображение страницы 
браузером и не используется другими инструментами. Тем не менее полезно прове- 
рять схему разрабатываемых веб-страниц (или, по крайней мере, схему типичной 
страницы сайта), чтобы быть уверенным в логичности структуры страниц и соблюде- 
нии правил НТМІ 5. 


Как просмотреть схему веб-страницы? 


Чтобы действительно понимать схемы страниц, нужно ознакомиться с ними в соб- 
ственной разработке. В настоящее время ни один из браузеров не поддерживает 
правила схем НТМІ5 и не оснащен средством для просмотра таковых. Но этот 
пробел можно заполнить несколькими специальными инструментами. 


П Онлайновый построитель НТМГ-схем. Откройте страницу ћќќр://оѕпеддегѕ. 
Ве 5.ог2/оцИтег и предоставьте построителю схем страницу для обработки. 
Как и в случае с валидатором НТМГ5 (см. разд. "Проверка кода НТМЕ5" главы 1), 
страницу можно предоставить тремя способами: загрузив файл с диска своего 
компьютера, указав ОВГ, страницы или вставив разметку страницы в текстовое 
поле. После предоставления файла любым из этих способов для создания схемы 
нужно нажать кнопку ОцИше 15! соответствующего способа. 


О Расширение браузера Сһготе. В браузере Сһготе схему страницы можно про- 
смотреть с помощью подключаемого модуля | 50. Загрузите этот модуль с сайта 
Б@фр://соде.гоофе.сот/р/В50 и установите его в браузере. После установки мож- 
но будет просматривать схемы страниц, предоставляемых веб-сервером, но, 
к сожалению, на момент написания этих строк, не файлов, открываемых с диска 
локального компьютера. При посещении страницы справа от строки адреса 
выводится значок построителя схем, щелчок по которому выводит схему про 


[Э Аросаурзе Мом 
є С! О АросаіурѕеРаде Огідіпа!.һіт 


1. Ном {Ве Мога СоШ9 Епа 


. Мауап Соотѕдау 
. Кобої Такеоуег 


. Упехратед Ѕіпашагіќу 
. Кипамау Сіітаѓе Сһапае 
. СіоБаІ Ерідетіс 


Віснт мом, уоц'ге ргоБаЫу ѓееіпо ргейу вооа. АЁег аі, Не іп 
{Не 4еуеоре4 уогіа іѕ сотѓогіаЫе—ргођаЫу тоге 
сотѓогіаЫе ап #'з Бееп ѓог ће ауегазе Һитап Бета 
ћгоцсћоиї а] оЁгесог4еа Могу. 


Ви доп” сеї {оо ѕзтис. Тһеге'ѕ $ р]ешу оЁВогийс уауѕ іё 
сош аП #аП арагі. Іп #ћіѕ агісіе, уоп'Шеаги ађоиѓ а ем ороиг 
Ғауогіїеѕ. 


Рис. 2.10. При посещении веб-страницы справа от адресной строки браузера выводится значок 
построителя схем, при щелчке по которому выводится окно со схемой этой страницы 
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сматриваемой страницы (рис. 2.10). На сайте һ5о можно также загрузить 
Тауазсире-сценарий рооктатЩе! для браузеров Еігеѓох и Іпќетпеі Ехрогег. Этот 
сценарий добавляется в список закладок браузера, после чего в нем можно про- 
сматривать схему просматриваемой страницы. 


О Расширения для браузера Орега. Существует также версия построителя схем 
50 для браузера Орега. Загрузить ее можно с того же самого сайта, что и версию 
для Сһготе, или установить непосредственно с сайта В р://Ятуш .сот/3ЗКЗесду. 


Базовые схемы 


Чтобы создать мысленную картину схемы веб-страницы, представьте ее лишенной 
всего содержимого, за исключением текста в элементах пронумерованных заголов- 
ков (<һ1>, <һ2>, <һ3> И Т. д.). Потом сместите эти заголовки вправо на расстояние, 
зависящее от уровня каждого заголовка. Таким образом, отступ более глубоко вло- 
женных заголовков будет большим, чем заголовков более высокого уровня. 


Рассмотрим для примера статью об апокалипсисе в ее первоначальном состоянии, 
до того как она была подкорректирована в соответствии со стандартом НТМГ5: 


<роау> 
<аіу с1азз="Неаает"> 
<51>Ном ЕБе Мог1Я Соџ1а Епа</һ1> 


</аіу> 
<Һ2>Мауап РоотѕӢау</һ2> 
<һ2>БКороё Такеоуег</ћ2> 


<ћ2>0пехр1іаіпеа Зіпаоіагіёу</ћ2> 


<Һ2>Вопамау С11тафе Сһапде</һ2> 


Л 


2>С1ора1 Еріаетіс</ћ2> 
<аіу с1азз="Еооіег"> 
</аіу> 

</роду> 


Схема этой простой структуры выглядит таким образом: 


1. Ном һе Иог1а Соџц1а Епа 
1. Мауап роотѕаау 


Коро Такеоуег 
Опехр1аіпеа Ѕіпоиџ1агіёу 
Випамау С1Іітаёе Сһапде 


л шо м 


С1ора1 Ерідетіс 
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Двухуровневая иерархия заголовков (<һ1> и <һ2>) отображается двухуровневой 
схемой. Эта схема похожа на схемы, которые создают средства отображения струк- 
туры документа многих текстовых редакторов, например М \\ота 2010. 


Еще один пример разметки: 


<һ1>Заголовок уровня 1</һҺ1> 
<һ2>Заголовок уровня 2</һ2> 
<һ2>Заголовок уровня 2</һ2> 
<һ3>Заголовок уровня 3</һ3> 
<һ2>Заголовок уровня 2</һ2> 


Дает следующую схему: 


1. Заголовок уровня 1 
І. Заголовок уровня 2 
2. Заголовок уровня 2 
І. Заголовок уровня 3 
3. Заголовок уровня 2 


Опять же, никаких сюрпризов здесь. 


Алгоритм для создания схем достаточно умный и игнорирует пропущенные уров- 
ни. Например, в слегка корявой разметке, представленной далее, пропущен 
один уровень при переходе от заголовка первого уровня к заголовку третьего 
уровня: 


<һ1>Заголовок уровня 1</һ1> 
<һ2>Заголовок уровня 2</һ2> 
<Һ1>Заголовок уровня 1</һ1> 
<Ь3>Заголовок уровня 3</Һ3> 
<һ2>Заголовок уровня 2</һ2> 


Схема этой разметки следующая: 


1. Заголовок уровня 1 
І. Заголовок уровня 2 
2. Заголовок уровня 1 
1. Заголовок уровня 3 
2. Заголовок уровня 2 


Здесь заголовок третьего уровня находится на втором месте в схеме, по причине 
его позиции в документе. Это может показаться одним из случаев автоматического 
исправления ошибок, которое так любят делать браузеры, но в действительности 
такое поведение способствует достижению практической цели. В некоторых ситуа- 
циях веб-страница может быть собрана из нескольких частей, например, в нее мо- 
жет быть вставлена копия статьи, опубликованной где-то в другом месте. В таком 
случае уровни заголовков вставленного содержимого могут не совпадать с уровня- 
ми остального содержимого веб-страницы. Но так как алгоритм отображения схем 
устраняет такие несоответствия, то, скорее всего, проблем не будет. 
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Элементы для создания блоков 


Элементы для создания блоков применяются для формирования новых, вложенных 
схем внутри страницы. Это элементы <агёіс1е>, <аѕіаде>, <пау> И <ѕесёіоп>. Чтобы 
понять, как работают элементы для создания блоков, представьте себе страницу, 
содержащую два элемента <агіісіе>. Так как <агёісіе> является элементом для 
создания блоков, такая страница будет иметь, по крайней мере, три схемы: схему 
всей страницы и по одной вложенной схеме для каждой из статей. 


Чтобы лучше представить себе эту структуру, рассмотрим структуру статьи об апо- 
калипсисе после ее приведения к стандарту НТМГ5: 


<роау> 
<агііс1е> 
<Һеадег> 
<Һ1>Ном Ёһе Пог1а Соџ1а Епа</ћ1> 


Б) Е 

<аіу с1аѕз="Сопёепі"> 
<Һ2>Мауап роотѕӢау</һ2> 
<һ2>Короё Такеоуег</ћ2> 


<һ2>0пехр1аіпеа Ѕіпао1Іагіёу</ћ2> 


<һ2>Копамау С1ітабе Сһапде</һ2> 


Һ2>Сб1ора1 Еріаетіс</һ2> 


Л 


</аіу> 
</агііс1е> 


<Ғооёег> 
</ Ғооіег> 
</роду> 


Вставьте эту разметку в какой-либо построитель схем, например на сайте 
Һер://оѕпедаегѕ.һёті5.ого/оиііпег, и вы увидите следующую схему: 


1. тёіЕ1еа Ѕесёіоп 
1. Ном һе Мог1а Соџ1а Епа 
1. Мауап Роотзаау 


Коро Такеоуег 
Опехр1Іаіпеа Ѕіпочо1агііу 
Випамау СІітаёе Сһапде 


л шо м 


СІора1 Еріаетіс 
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В данном случае первый элемент схемы — это блок без заголовка, которым являет- 
СЯ корневой элемент <роау>. Элемент <агіісіе> начинает новую, вложенную схему, 
которая содержит один элемент <һ1> и несколько элементов <һ2>. 


Иногда наличие блока без заголовка "Опіеа ЗесНоп" указывает на ошибку. Хотя 
элементы <аѕіде> И <пау> без заголовков считаются приемлемыми, такая терпи- 
мость обычно не распространяется на элементы <ахЕ1с1е> И <ѕесёіоп>. В предыду- 
щем примере блок без заголовка является основным блоком страницы, который 
принадлежит элементу <роау>. Так как страница содержит одну статью, в отдель- 
ном заглавии для страницы нет смысла, поэтому можно не обращать внимание на 
эту странность. 


Теперь посмотрим, что будет в случае более сложного примера, в качестве которо- 
го выступает веб-страница с боковой панелью на рис. 2.6. Построитель схем выдает 
для нее следующую схему: 


1. Ароса1урѕе Тоаау 
1. Опёіё1Іеа Ѕесііоп 
1. Агёіс1Іеѕ 
2. Ароџё Оз 
2. Ном ће Мог1а Соџ1а Епа 
1. Мауап Роотм5аау 


2. Короё Такеоуег 

3. ОпёїіЁІеа Ѕес+іоп 

4. Опехр1аіпеа Ѕіпадиџ1агіёу 
5. Випамау С11тафе Сһапде 
6 


С1ора1 Еріаетіс 


В данном случае мы имеем два элемента для создания блоков и две вложенные 
схемы: одну — для боковой панели, а другую — для статьи. Также имеются два 
блока без названий, оба вполне законные. Первый из них — это элемент <аѕіаде> 
ДЛЯ боковой панели, а второй — элемент <аѕіаде> для броской цитаты во врезке 
в статье. 


ПРИМЕЧАНИЕ 


Кроме элементов для создания блоков существуют элементы, называющиеся корнями 
блоков. Эти элементы не просто ответвления какой-либо схемы, они начинают новую, 
собственную, схему, которая не входит в основную схему содержащей их страницы. 
Элемент <роду>, в который заключено содержимое веб-страницы, является корнем 
блока, и это логично. Но в НТМЁ5 корнями блоков считаются также элементы 
<р1оскацоіёе>, <6а>, <Ғіе1аѕеі>, <Е1диге> И <аефа113>. 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 

Чем элементы для создания блоков полезны 

в случае сложных страниц? 

Возможность разбиения содержимого на блоки очень полезна при синдикации и агре- 


гировании — двух из нескольких способов публикации в веб-странице содержимого из 
других веб-сайтов. 


Возьмем, например, веб-страницу, содержащую отрывки из нескольких статей, кото- 
рые все размещены на других сайтах. Теперь представим, что эта страница имеет 
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структуру заголовков с большой глубиной вложения и где-то внутри этой иерархии за- 
головков, скажем под заголовком <һ4>, размещена статья, взятая с другой веб- 
страницы. 


В традиционной разметке НТМЁ желательно, чтобы первый заголовок этого содержи- 
мого был уровня <15>, т. к. он вложен под уровнем <ћ4>. Но эта статья первоначально 
была создана для размещения в другом месте, на другой странице с меньшей глуби- 
ной вложения блоков, поэтому она, вероятно, начинается с заголовка <ћ2> или даже 
<һ1>. Это обстоятельство не мешает отображению страницы должным образом, но 
означает, что ее иерархия смешана, и страница окажется более трудной для обработ- 
ки программами для чтения экрана, поисковыми движками и другим программным 
обеспечением. 


Применение в разметке такой страницы элементов НТМЕ5 решает эту проблему. Для 
этого вложенная статья вставляется в элемент <агііс1е>, вследствие чего содержи- 
мое из внешнего источника становится частью собственной схемы вложений. Эта 
схема может начинаться с заголовка любого уровня, для схемы страницы это не име- 
ет никакого значения. Важным является его позиция в содержащем документе. Таким 
образом, если этот элемент <ахЕ1с1е> находится после заголовка уровня <ћ4>, тогда 
заголовок первого уровня внешней статьи ведет себя как заголовок логичного уровня 
<һ5>, заголовок второго уровня — как заголовок логичного уровня <ћ6>, и т. д. 


Из этого следует такой вывод: стандарт НТМЁЕ5 предоставляет логическую систему 
создания схем, которая облегчает объединение документов. В этой системе создания 
схем важной является позиция заголовков, а не их уровень, явно указанный в содер- 
жащих их элементах, т. е. <ћ1>, <һ2>, <һ3> и т. д. Это уменьшает вероятность допу- 
щения ошибок при разборе страницы. 


Решение проблемы со схемой 


Схемы веб-страниц во всех рассмотренных ранее примерах имеют полностью ло- 
гическую структуру. Но в реальной жизни не все так просто, и могут возникать 
проблемы. Допустим, например, что мы создали следующий документ: 


<роау> 
<агіісіе> 


< 


Л 


Л 


Л 


Һ1>Чудеса природы, которые следует увидеть в своей жизни</һ1> 


һ2>В Северной Америке</һ2> 


ҺЗ>Большой каньон</һ3> 


Һ3>Йеллоустонский национальный парк</ћ3> 


һҺ2>В остальном мире</һ2> 


<азѕіае>...</аѕіае> 


<ҺЗ>Галапагосские острова</һ3> 


<3>Швейцарские Альпы</һ3> 


</агііс1е> 
</Боау> 
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Кажется, следует ожидать, что схема этой структуры будет следующей: 


1. ОптетЕ]еа бесЕ1оп Гог Ере <роау> 
1. Чудеса природы, которые следует увидеть в своей жизни 


1. В Северной Америке 

1. Большой каньон 

2. Йеллоустонский национальный парк 
2. В остальном мире 
3. ОпёіЁЈІеа Ѕесіёіоп Еог ЕВе <аѕіае> 


1. Галапагосские острова 


2. Швейцарские Альпы 


Но в действительности получим следующую схему: 


1. ОпЕТЕ]еа бесЕ1оп Гог Ере <роау> 
1. Чудеса природы, которые следует увидеть в своей жизни 


1. В Северной Америке 
1. Большой каньон 
2. Йеллоустонский национальный парк 
2. В остальном мире 
3. ПпЕ1Ееа Ѕесїёіоп Еог ЕБе <аѕіае> 
4. Галапагосские острова 
5. Швейцарские Альпы 


Каким-то образом добавление элемента <аѕіаде> после элемента <һ2> нарушает 
иерархию следующих элементов <һ3>, делая их логический уровень таким же, как и 
уровень заголовка <һ2>, Это, очевидно, не то, что нам требуется. 


Чтобы решить это проблему, нужно сначала понять, что система НТМГ5 для соз- 
дания схемы документа автоматически создает новый блок для каждого найденного 
ею элемента пронумерованного заголовка (т. е. <ћ1>, <һ2>, <һ3> ИТ. д.), но не тогда, 
когда этот элемент уже находится вверху блока. 


В данном случае система создания схем не обращает внимания на начальный эле- 
мент <һ1>, т. к. он находится вверху блока <агіісіе>. Но для следующих за ним 
элементов <ћ2> и <һз> новые блоки создаются. В результате получается схема, как 
будто бы была создана следующая разметка: 


<роау> 
<агіісіе> 


<һ1>Чудеса природы, которые следует увидеть в своей жизни</ћ1> 


<ѕесііоп> 
<Һ2>В Северной Америке</һ2> 


<ѕесііоп> 
<ҺЗ3>Большой каньон </һ3> 


</ѕесііоп> 
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<зесЕ1оп> 
<Һ3>Йеллоустонский национальный парк </ћ3> 


</ѕесііоп> 
</ѕесііоп> 


<ѕесііоп> 
<һ2>В остальном мире</һ2> 


</ѕесііоп> 
<азѕіае>...</аѕіае> 


<ѕесііоп> 
<һ3>Галапагосские острова</ћ3> 


</ѕесёіоп> 
<ѕесііоп> 
<3>Швейцарские Альпы</һ3> 


</ѕесёіоп> 
</агііс1е> 
</роду> 


В большинстве случаев эти автоматически создаваемые блоки не являются пробле- 
мой. Более того, эта особенность обычно полезна, т. к. обеспечивает помещение 
неверно пронумерованных заголовков на правильные уровни схемы (см. врезку 
"Малоизвестная или недооцененная возможность. Чем элементы для создания 
блоков полезны в случае сложных страниц?" ранее в этой главе). Цена за это удоб- 
ство — случайные сбои, подобные только что рассмотренному случаю. 


Как можно видеть в этом листинге, поначалу все идет, как следует. Верхний эле- 
мент <һ1> остается (т. к. он уже находится в элементе <агёіс1е>), создается блок ДЛЯ 
первого элемента <һ2>, потом вложенный блок для каждого элемента <һ3> и т. д. 
Проблема возникает, когда процесс доходит до элемента <азтае>. Этот элемент 
рассматривается как сигнал для закрытия текущего блока и означает, что блоки, 
создаваемые для следующих элементов <һ3>, будут на таком же логическом уровне, 
что и предшествующие элементы <һ2>. 


Чтобы решить эту проблему, нужно взять под контроль создание блоков и подбло- 
ков, определив некоторые из них самостоятельно. В данном примере целью являет- 
ся предотвращение слишком раннего закрытия второго блока <һ2>. Это можно сде- 
лать, явно определив его в разметке: 


<роау> 
<агіісіе> 


<һ1>Чудеса природы, которые следует увидеть в своей жизни</ћ1> 


<һ2>В Северной Америке</ћ2> 
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<ҺЗ>Большой каньон</ћ3> 
<Һ3>Йеллоустонский национальный парк</һ3> 


<ѕесііоп> 
<һ2>В остальном мире</һ2> 


<аѕіае>...</аѕіае> 


<ҺЗ>Галапагосские острова</ћ3> 


<3>Швейцарские Альпы</һ3> 


</ѕесііоп> 
</агііс1е> 
</роау> 


Теперь алгоритм создания схем не обязан автоматически создавать блок для второ- 
го элемента <һ2>, вследствие чего нет опасности, что он закроет этот блок, когда 
обнаружит элемент <аз1ае>. Хотя можно было бы определить блок для каждого за- 
головка в этом документе, нет смысла загромождать этим разметку, т. к. всего лишь 
одно исправление решает проблему. 


ПРИМЕЧАНИЕ 


Другой вариант решения — использовать вместо элемента <аз14е> элемент <аіу>. 
Так как <аіу> не является элементом создания блоков, он не вызовет преждевремен- 
ное закрытие блока. 


Использование элемента <аѕіде> не всегда вызывает эту проблему. В предыдущих 
примерах этот элемент использовался для броской цитаты во врезке, но работал без 
проблем, т.к. располагался между двумя элементами <һ2>. Но при помещении 
в разметке элемента создания блоков между двумя элементами заголовков разного 
уровня нужно проверить, не нарушена ли логика соответствующей схемы. 


СовеТ 


Не стоит слишком переживать, если вся эта концепция схем веб-страниц кажется 
слишком теоретизированной. По правде говоря, это довольно тонкая концепция, кото- 
рую многие веб-разработчики будут игнорировать (по крайней мере, на данный мо- 
мент). Лучше всего рассматривать систему НТМЕ5 для создания схемы документа как 
полезный инструмент контроля качества. Просмотр схемы документа в одном из инст- 
рументов, описанных в разд. "Как просмотреть схему веб-страницы" ранее в этой 
главе, способен помочь уловить ошибки, которые могут указывать на другие пробле- 
мы, а также обеспечить правильное использование семантических элементов. 


ГЛАВА З 


Разметка со смыслом 


В предыдущей главе мы познакомились с семантическими элементами НТМГ5. 
С их помощью создаваемые веб-страницы можно аккуратно логически структури- 
ровать и подготовиться к появлению будущих сверхинтеллектуальных браузеров, 
поисковым движкам и вспомогательным средствам для просмотра страниц пользо- 
вателями с ограниченными возможностями. 


Но мы еще не закончили рассмотрение темы семантики веб-страниц. Семантика 
предназначена придать смысл разметке веб-страниц с помощью вставки в нее ин- 
формации нескольких разных типов. В главе 2 мы изучили разработку структуры 
страницы, применяемой для объяснения больших блоков содержимого и целых 
разделов разметки. Но кроме семантики блочного уровня, также существует семан- 
тика текстового уровня, добавляемая в разметку с целью объяснения единиц со- 
держимого намного меньшего размера. Семантику текстового уровня можно ис- 
пользовать для того, чтобы указать на важную информацию, которая в противном 
случае была бы потеряна в море разметки веб-страницы. Такой информацией могут 
быть имена людей, адреса, календари событий, описания товаров, кухонные рецеп- 
ты, обозрения разных типов и т. п. Обозначенную таким образом информацию по- 
том могут извлекать и использовать разнообразные службы, начиная от интеллек- 
туальных подключаемых модулей браузера до специализированных поисковых 
ДВИЖКОВ. 


В этой главе мы сначала рассмотрим небольшой набор семантических элементов 
текстового уровня, встроенных в язык НТМГ5, которые можно без труда использо- 
вать в настоящее время. Далее мы рассмотрим сопутствующие стандарты, позво- 
ляющие работать с семантикой текстового уровня напрямую. Для этого нам при- 
дется разобраться с концепцией микроданных, которая возникла как часть перво- 
начальной спецификации НТМІ5, но в настоящее время является отдельным, 
продолжающимся развиваться стандартом, ответственной за который является ор- 
ганизация МЗС. Попутно мы взглянем на несколько "дальновидных" служб, кото- 
рые успешно используют микроданные уже в настоящее время. 
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Повторение семантических элементов 


Мы начали рассматривать семантику с изучения элементов уровня структуры стра- 
ницы потому, что разобраться с семантикой этого уровня довольно легко. А легкая 
она оттого, что структура подавляющего большинства веб-сайтов сравнительно 
одинаковая и создается с помощью небольшого набора элементов дизайна — верх- 
них и нижних колонтитулов, боковых панелей и меню. Краткий обзор этих элемен- 
тов приводится в табл. 3.1. 


Таблица 3.1. Семантические элементы блочного уровня 


Элемент Описание 


<агііс1е> Представляет любую единицу информации, которую можно рассматривать, 
как статью — блок самодостаточного содержимого наподобие газетной 
статьи, сообщения на форуме или записи в блоге (исключая второстепенную 
информацию, такую как комментарии или биография автора) 


<аз1ае> Представляет цельный фрагмент содержимого, отдельный от окружающего 
его остального содержимого страницы. Например, логично использовать 
элемент <аѕіаде>, чтобы создать боковую панель, содержащую связанное 
содержимое или ссылки на основную статью 


<Ғісоге>и Представляет рисунок. Элемент <#іссарёіоп> содержит текст подписи к 
<Ғідсарііоп> рисунку, а элемент <Ғісоге> — элементы <Ғісдсарііоп> и <іто>, который 
собственно и ссылается на изображение. Цель такой комбинации — указать 
связь между рисунком и его подписью 


<Еоофег> Представляет нижний колонтитул страницы. Это небольшой фрагмент со- 
держимого, который может включать "мелкий текст", сообщение об автор- 
ских правах и несколько ссылок (например, "О нашей компании" 

или "Поддержка") 


<реадех> Представляет расширенный верхний колонтитул, включающий стандартный 
заголовок НТМЕІ и дополнительное содержимое. Дополнительное содержи- 
мое может состоять из логотипа, имени автора и набора навигационных 
ссылок для основного содержимого страницы 


<Вагойр> Представляет расширенный заголовок, содержащий два или более прону- 
мерованных элемента заголовка (т. е. <һ1>, <һ2>, <һ3> ит. д.), и ничего 
больше. Основное назначение этого элемента — держать заголовок и подза- 
головок вместе 


Представляет значительный набор ссылок на странице, указывающих на 
тематические разделы текущей страницы или на другие страницы веб-сайта. 
На практике страницы с несколькими блоками <пау> не являются редкостью 


<ѕесііоп> Представляет раздел документа или группу документов. Элемент <ѕесііоп> 
является универсальным контейнером, использование которого регламенти- 
руется единственным правилом: его содержимое должно начинаться с заго- 
ловка. Элемент следует использовать только в тех случаях, когда не подхо- 
дят никакие другие семантические элементы (такие как, например, 
<агііс1Іе> или <аѕіде>) 


Семантика текстового уровня намного сложнее по причине огромного количества 
типов содержимого. Если бы НТМІ5 содержал элемент для каждого типа инфор- 
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мации, которую можно включить в веб-страницу, то вместо четкой и ясной размет- 
ки такое изобилие семантических элементов, наоборот, сделало бы ее более запу- 
танной. Проблема усложняется тем, что структурированная информация также 
состоит из более мелких составных частей, которые можно компоновать разными 
способами. Например, даже для обычного почтового адреса потребовалась бы 
целая куча семантических элементов (наподобие <ааатезз>, <пате>, <ѕёгееё>, 
<розфа1соде>, <соипеху> и т. д.), прежде чем его можно было использовать в размет- 
ке страницы. 


Для решения этой проблемы в НТМІ5 применяются два подхода. Во-первых, вво- 
дится очень небольшое количество семантических элементов текстового уровня. 
Во-вторых, что более важно, НТМІ5 поддерживает отдельный стандарт микродан- 
ных, который предоставляет разработчикам расширенный способ определить по 
своему желанию любой тип информации, а потом пометить эту информацию в раз- 
метке флагами. В этой главе рассматриваются оба эти подхода. Начнем их рас- 
смотрение с трех новых семантических элементов текстового уровня: <Е1те>, 
<оціроё> И <магК>. 


Обозначение дат и времени 
с помощью элемента <ї/те> 


Веб-страницы часто содержат информацию о датах и времени. Например, такая 
информация вставляется в конце большинства записей в блогах. К сожалению, 
стандартного способа помечать даты не существует, вследствие чего другим про- 
граммам (например, поисковым движкам) не так-то легко извлечь их из остального 
кода разметки. Эта проблема решается введением семантического элемента <ёіте>, 
с помощью которого можно обозначить дату, время или комбинацию обоих. В сле- 
дующем коде приводится пример использования этого элемента: 


Новый магазин откроется <Е1ме>2012-03-21/Е1мте>. 


ПРИМЕЧАНИЕ 


То, что элемент <+іте> применяется как оболочка для даты (без времени), может по- 
казаться несколько нелогичным, но это просто одна из странностей НТМІ5. Логичнее 
было бы ввести элемент <дДасесіте>, но этого почему-то не сделали. 


От элемента <сіте> требуется выполнять две функции. Во-первых, он должен ука- 
зывать местонахождение значения даты или времени в разметке. Во-вторых, он 
должен предоставлять заключенное в него значение даты или времени в форме, по- 
нимаемой любой программой. Предыдущий пример отвечает второму требованию 
предоставления универсального формата даты, который состоит из четырехсим- 
вольного значения года, двухсимвольного значения месяца и двухсимвольного 
значения дня, в указанном порядке. Иными словами, формат даты имеет такой 
шаблон: 


ГГГГ:ММ:ДД 


Но пользователю, просматривающему веб-страницу, дату вполне допустимо пока- 
зать в другом формате. Более того, дату на экран можно выводить любым нравя- 
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щимся вам способом, при условии предоставления ее значения в машиночитаемом 
универсальном формате в атрибуте дасебіте, как показано в следующем примере: 


Новый магазин откроется <Е1ме ЧафеЕ1те="2012-03-21">21-го марта</&1те>. 


В браузере это будет выглядеть таким образом: 


Новый магазин откроется 21-го марта. 


Подобные правила также применяются и для значения времени, которое предос- 
тавляется в таком формате: 


ЧЧ:ММ+00:00 


То есть, дается двузначное значение часа (в 24-часовом формате), затем двузначное 
значение минут. Часть после знака "плюс" (или "минус") представляет смещение 
часового пояса от всемирного координированного времени. Указание смещения 
часового пояса является обязательным. Узнать смещение часового пояса для кон- 
кретного региона можно на веб-сайте ћќр://еп.мікірейіа.ого/уікі/Тіте топе. На- 
пример, Москва находится в московском часовом поясе, который также называется 
ОТС+4:00', т. е. смещение данного часового пояса равно плюс четырем часам. 
Время 16:30 в Москве указывается в разметке следующим образом: 


Магазин открывается ежедневно в <ііпе ЧафеЕ1те="16:30+4:0">16:30</Е1ме>. 


Таким образом, посетителям веб-страницы время представляется в привычном для 
них формате, в то время как для поисковых роботов и другого программного обес- 
печения предоставляется однозначное значение даёеёіте, с которым они могут ра- 
ботать. 


Наконец, время в определенный день указывается путем совмещения этих двух 
стандартов. Дата приводится первой, за ней следует прописная латинская буква Т, 
после которой указывается время: 


Новый магазин откроется <Е1ще дӢаёеііте="2012-03-21Т16:30+4:00"> 
21-го марта в 16:30</Е1те>. 


Элемент <е1е> также поддерживает атрибут рчрааѓе. Он применяется в тех случа- 
ях, когда указываемая дата совпадает с датой публикации текущего содержимого 
(например, статьи, в которой помещается элемент <Е1те>). В качестве примера 
можно привести такой код: 


Опубликовано <ііпе дабебіте="2011-03-21" раБЧа*е>21-го марта 2011 г.</Е1те> 


ПРИМЕЧАНИЕ 


Так как элемент <сіте> является чисто информационным и не обеспечивает никакого 
связанного с ним форматирования, его можно использовать для любого браузера, не 
волнуясь о совместимости. Но для форматирования этого элемента необходимо при- 
бегать к обходному решению для Іпїегпеї Ехрюгег, описанному в разд. "Браузерная со- 
вместимость для семантических элементов" главы 2. 


ОТС (Опімегѕа! Тіте, Соогіпаіей) — всемирное координированное время. 
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Јама$сгірі-вычисления и элемент <оиіриѓ> 


Семантический элемент <опЕриЕ> предназначен для облегчения понимания размет- 
ки определенных страниц, в которых используются сценарии Јауа$Ѕсгірі. Функция 
этого элемента состоит просто в резервировании поля подстановки, в которое код 
может выводить результаты вычислений. 


Допустим, например, что вы создали страницу наподобие показанной на рис. 3.1. 


3 ВМІ Саісшаѓог \ => 


С © ВтіСаісиаїог.ћіт 


Воду Маѕѕ ш4дех СаІсшаёог 


Неірће |7 Ғееї 
1 іпсһеѕ 
Уесһе 230 рошпіѕ 


Уош ВМІ 22.4 


ВМ Үеісһ 5{а$ 


Веіоу 18.5 Опаегуеісћ 


18.5 – 24.9 Моппа! 


25.0- 29.9 Оуегле Е 


30.0 апа АБоуе | Оъеѕе 


Рис. 3.1. Проверенный временем шаблон для онлайновых вычислений. 
Введите требуемые данные, нажмите кнопку, и форма выводит результат 


Показанная на рис. 3.1. форма разрешает пользователю ввести определенную 
информацию в соответствующие поля. Нажатие кнопки Саешае отправляет 
эту информацию сценарию ЈауаЅсгірі, который выполняет необходимые вычисле- 
ния и выводит результаты этих вычислений в соответствующих полях внизу 
формы. 

В таких случаях для обозначения места для вывода результатов полю подстановки 
присваивается однозначный идентификатор. Обычно для поля подстановки исполь- 
зуется элемент <зрап>, который отлично работает, но не придает этому полю ника- 
кого специфического значения: 


<р>Үоџг ВМІ: <ѕрап 14="геза1"></зрап></р> 


Использование же элемента <опЕриЕ> ДЛЯ этой цели делает код более осмысленным: 


<р>Үоџг ВМІ: <оџіриё 14="геза1"></очЕриЕ></р> 
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Собственно код ЈауаЅсгірі не требует никаких изменений, т. к. он ищет элемент по 
его идентификатору, и его ничуть не волнует тип этого элемента: 


уаг гезо1ЕЕ1етеп® = аосимеп® .одеёЕ1ІетмепЕВута ("гези16"); 


ПРИМЕЧАНИЕ 


Прежде чем использовать элемент <оцёроиі> с Іпіегпеї Ехр!огег, обязательно включите 
в свой код обходное решение для этого браузера, описанное в разд. "Браузерная со- 
вместимость для семантических элементов" главы 2. В противном случае, на ста- 
рых версиях ІТ этот элемент будет недоступным в уауаЗсйре. 


Часто ДЛЯ удобства элементы управления помещаются в элемент <Еоги>. В сле- 
дующем листинге показан соответствующий код, в котором определяются три тек- 
стовых поля для ввода информации: 


<Еога асііоп="#" 1а="р1Са1со1а®ох"> 
<1аре1 Ғог="Ғееі іпсһеѕ">Неідһі:</1аре1> 
<іпроиё пате="Ғееї"> Ғееё<рг> 


<іпроё пате="іпсһеѕ"> іпсһезѕ<рг> 


<1аре1 Ғог="роџпаѕ">їеісћё:</1аре1> 
<іпроиё пате="роопаѕ"> роџпаз<рг><рг> 


</ Еогт> 
Элемент <оцџіро> можно сделать еще более осмысленным, добавив в него атрибут 
Роги (который указывает идентификатор формы, содержащей связанные элементы 


управления) и атрибут Еог (со списком идентификаторов связанных элементов 
управления, разделенных запятыми). Далее показан примера такого кода: 


<р>Үоџг ЕМІ: <оџіриі 1а="геза1е" Ғогт="рті Са1си1аіог" 
Ғог="Ғее іпсһеѕ роџпаѕ"></опірої></р> 


Эти атрибуты в действительности ничего не делают, кроме как передают информа- 
цию о том, откуда элемент <оџероє> получает свои данные. Но они вносят очень 
важную информацию с точки зрения семантики. В частности, если страницу нужно 
будет отредактировать кому-то другому, а не разработчику-хозяину, эти атрибуты 
помогут ему разобраться, как она работает. 


СовеТ 


Если ваших знаний о формах недостаточно для понимания этой главы, см. главу 4. 
А если вы знаете эсперанто лучше, чем Јауа5сгірї, то можете освежить свои знания 
этого языка программирования, ознакомившись с приложением 2. Наконец, если вы 
хотите исследовать весь код примера, его можно загрузить с сайта ИЧр:/тебос- 
те.сот/ргоѕеїесћ/ћїті5. 


Выделение текста цветом 
с помощью элемента <тагк> 
Элемент <пагк> обозначает блок текста, выделенного цветом. Применение ЭТОГО 


элемента особенно подходит для выделения фрагментов текста, как показано в сле- 
дующем листинге: 
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<р>Іп = 2009, Гасероок паде а ро1а агар ёо омп еуегуопе!'з 
сопіепі, <еп>Ғогеуег</еп>. Тһіѕ іѕ (те ёехі ёһеу риё іп ёһеіг 
бегтѕ оЁ зегу1се:</р> <р1оскапџоёе>Үои Бегеру дгапі Ғасероок ап 
<тагк>іггеуосар1Іе, регреіџа1, поп-ехсіџзіуе, ёгапѕёегар1е, 
Ғџ11у раіа, мог1ам1ае 1ісепѕе</тагк> (иле іће гісһі іо 
ѕир1ісепѕе) ёо <махК>иазе, сору, рир1іѕћ</тагк>, ѕігеап, зіоге, 
геёаіп, рир1іс1Іу регЕоги ог аізрІау, ікапзтіё, зсап, геҒогптаё, 
поаіҒу, еаіі, Егаме, ігапѕ1аіе, ехсегрі, айарі, сгеаїе 
аегіуабіуе могКз апа аізігіриёе (ЕБгочор ти1бірІе Е1егз), 
<пагк>апу изег сопіепі уой роѕі</тагк> 


</р1оскаооёе> 


Текст, взятый в элемент <пагк>, выделяется желтым цветом, как показано на 
рис. 3.2. 


8 тацевыти р- эх |  «таж> Батріе 


Іа 2009. ЕасефооК тайе а бо!4 ога іо отп еуегуопе'ѕ сопіепі, /огеуех. Тм 15 іе їехі 
еу рш іп Фен їеттѕ оф ѕегуісе: 


Үоџ һегебу отапі РасефооК ап 
(уив е тісім їо забИсепзе) їо изе, 
. змеат, юге, геїаіп. рибИс[у регѓогт ог йіѕріау, ігапѕтиї, зсап, 
геѓогтаї, той:ѓу, еди, Нате, їгапѕ1аѓе, ехсегру, айарі, сгеаіе депуануе \моГКз 
апа діѕігіриіе (точен аа ре негз), оп ог іп 
соппесіоп уі ће ЕасефооК Зегулсе ог ће рготоноп ћегеоЁ ѕибјесі опу іо 
уошг рихасу зе 12$ ог епаЫе а изег ‘о роѕї. 


Еопипаеу, ћеу'уе ѕіпсе баскітаскей апа ухеакепей ће |1апоцазе сопз1егау. Неге'ѕ ће 
теіетапі зесноп їойау: 


‚ апа уоц сап 
сопітоЇ Но\у 1ї 15 зһагей һгоџоћһ уои рпіуасу апа арріісайоп зе 11$. Іа 
ад1ноп: 1. Рог сопіепї аї 15 соуегей Бу ииеЦеста! ргорепу гір, НКе 
рћһоїоѕ апа уійеоѕ ("ІР сопіепі"), уоо ѕресійсаПу сіе из ће ЮПоуіпс 
регтізѕзіоп, ѕиђјесі їо уоџг рпуасу апі аррИсаноп ѕейіпоѕ: 


оп ог іп соппесноп уһ ЕасебооК. 
опеѕѕ уошг сопіепї наз Бееп 
ѕһагей уһ офћегѕ. апі іһеу һауе пої де!е1е4 и. 


Рис. 3.2. Эффект использования элемента <тагк> в разметке 


С помощью элемента <пагк> можно также помечать важное содержимое или клю- 
чевые слова (наподобие того, как это делают поисковые движки, выделяя текст, 
совпадающий с текстом запроса, в результатах поиска) или совместно с элементами 
<ае1> (удалено) и <іпѕ> (вставлено) помечать изменения в документе. 


По правде говоря, элемент <пакк> немного выделяется из компании остальных се- 
мантических элементов. Хотя спецификация НТМГ.5 считает его семантическим 
элементом, его презентационная функция, возможно, более важная, чем семантиче- 
ская. По умолчанию текст, помеченный элементом <тагк>, выделяется желтым цве- 
том, но с помощью правил таблицы стилей можно применить какой-либо другой 
цвет. 
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СовеТ 


По сути, элемент <тагк> не предназначен для выполнения форматирования текста. 
В конце концов, имеется множество других способов выделить текст на веб-странице. 
Поэтому элемент <тахк> следует использовать (совместно с форматированием по- 
средством С$$, если есть такое желание), когда это подходит с точки зрения семан- 
тики. Удачно использовать элемент <тагк> для привлечения внимания к обычному 
тексту, содержание которого по какой-либо причине является важным, например из-за 
контекста обсуждения, в котором он находится, или из-за выполняемой пользовате- 
лем операции. 


Даже если оставляется форматирование по умолчанию (черный текст на желтом 
фоне), следует добавить правило таблицы стилей для этого форматирования для 
браузеров, которые не поддерживают НТМІ.5. Далее приводится пример такого 
правила: 


паук { 
раскагоџпа-со1ог: уе11ои; 
соТог: р1Іаск; 


} 


А чтобы форматирование элемента <тагк> работало в Іпќегпеѓ Ехр|огег, нужно доба- 
вить обходное решение, описанное в разд. "Браузерная совместимость для семан- 
тических элементов" главы 2. 


Другие стандарты, улучшающие семантику 


Сейчас вы, наверное, думаете, что в разметке веб-страниц можно было использо- 
вать множество других семантических элементов, которых в НТМІ5 нет. Ну да, 
имеющимися элементами можно помечать даты и выделять цветом текст, но как 
насчет других единиц информации — адресов, названий компаний, описания това- 
ров, персональных сведений и т. п.? Создатели НТМІ5 преднамеренно обошли эту 
область, т. к. не хотели загромождать язык десятками специализированных элемен- 
тов, необходимых одним разработчикам, но полностью бесполезных для других. 
Чтобы по-настоящему перейти на следующий уровень в семантике, необходимо 
выйти за пределы базового языка НТМІ5 и рассмотреть некоторые другие стандар- 
ты, которые можно применять в разработке веб-страниц. 


Идея семантически осмысленной разметки не является новой. В действительности, 
давным-давно, когда НТМГ.5 существовал только в задумках Яна Хиксона (ап 
Ніскѕоп), редактора группы \УНАТУ\У/С, многие веб-разработчики настойчиво иска- 
ли методы для создания более осмысленной разметки. Не всегда их требования 
совпадали: одни хотели улучшить доступность своих веб-страниц, другие — воз- 
можность для интеллектуального анализа данных, а третьим просто хотелось повы- 
сить фактор впечатляемости своего резюме. Но никто из них не смог найти то, что 
им требовалось в стандартном языке НТМГ, вследствие чего было создано не- 
сколько новых стандартов, чтобы заполнить этот пробел. 


В последующих разделах мы рассмотрим аж четыре таких стандарта. Сначала мы 
познакомимся со стандартом АВИА, предназначенным для улучшения доступности 
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веб-страниц для программ чтения экрана. Потом мы вкратце рассмотрим три кон- 
курирующих подхода к описанию содержимого самых разнообразных типов, будь 
то подробная контактная информация, названия компаний или просто все что угод- 
но, что можно вставить в теги НТМГ-страницы. 


Стандарт АссеѕѕіЫіе Кісһ Іпіегпеї АррИсаНоп$ 


Развивающийся стандарт Ассеѕѕ16е Кісһ Іпќегпе Аррісабопѕ (АВТА, доступные 
активные веб-приложения) позволяет предоставлять дополнительную информацию 
для программ чтения экрана с помощью атрибутов любого элемента НТМГ. Среди 
прочих, в нем вводится атрибут го1е, который указывает назначения данного эле- 
мента. Например, назначение представляющего верхний колонтитул элемента 
<аіу>: 


<аіу с1аѕѕ="Һеадег"> 


можно довести до сведения программ чтения экрана, присвоив атрибуту го1Іе зна- 
чение раппег: 


<аіу с1аѕз="Һеадег" го1е="раппег"> 


Но, опять же, как мы узнали в главе 2, стандарт НТМГ.5 предоставляет нам более 
осмысленный способ обозначения верхних колонтитулов. Поэтому нам следует ис- 
пользовать что-то наподобие следующего: 


<һеадег го1е="раппег"> 


Этот пример иллюстрирует два важных факта. Первый: стандарт АВТА требует 
использования одного из коротких списков рекомендованных названий ролей. 
(Полный список см. в соответствующем разделе спецификации по адресу 
ууүү.үүЗ.ого/ТК/аі-агіа/гоіеѕ$Напатагк _гоеѕ.) Второй: некоторые части стандар- 
та АВГА перекрывают семантические элементы НТМГ5, что вполне логично, т. к. 
АВТА появился раньше НТМІ5. Но это не совсем полное перекрытие. Например, 
некоторые названия ролей дублируют элементы НТМГ5 (скажем, раппег И акЕ1с1е), 
в то время как другие являются более продвинутыми (например, коо1ъаг И ѕеагсћ). 


Стандарт АВТА также вводит два атрибута для работы с НТМГ-формами. Атрибут 
агіа-гедџігеа в текстовом поле указывает, что пользователю нужно ввести значе- 
ние. А атрибут агіа-іпуа1іа указывает на недействительность текущего значения 
в текстовом поле. Польза от этих атрибутов в том, что программы чтения экрана 
могут пропустить визуальные подсказки, которыми руководствуются пользователи 
с нормальным зрением при заполнении форм, например, звездочку рядом с неза- 
полненным полем или красный мигающий восклицательный знак рядом с полем с 
неправильным введенным значением. 


Чтобы правильно применять стандарт АКТА, необходимо изучить его и потратить 
некоторое время на исследование разрабатываемой разметки. С учетом того, что 
стандарт АКІА все еще находится в процессе развития и НТМІ5 предоставляет не- 
которые такие же возможности, но меньшей ценой, мнение веб-разработчиков ка- 
сательно ценности такого вложения усилий и времени в этот стандарт неоднознач- 
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но. Но если вы хотите создать веб-сайт по настоящему доступный уже сегодня, 
нужно использовать оба стандарта, т. к. новые программы чтения экрана поддер- 
живаются стандарт АКТА, а стандарт НТМГ.5 — еще нет. 


ПРИМЕЧАНИЕ 


Дополнительную информацию о стандарте АВІА (полное название которого — М/АІ- 
АРА, т.к. он был разработан группой М/А!) см. в его спецификации на сайте 
млмим/ м 3.огд/ТЕА/ма!-апа. 


Стандарт Кезоигсе Оеѕсгірііоп Егатемогк 


Стандарт Кеѕошсе Оезсирйоп Егатемотк (ВОЕа, инфраструктура для описания ре- 
сурсов — в атрибутах ) определяет правила для интегрирования подробных мета- 
данных в веб-документы посредством атрибутов. У стандарта ВОЕа есть значи- 
тельное преимущество перед другими подходами, рассматриваемыми в этой главе: 
это стабильный, установившийся стандарт. Но у него также два значительных не- 
достатка. Первый — это сложный стандарт. Разметка со вставленными в нее мета- 
данными ВОЕа получается намного объемистей и существенно неуклюжей, чем 
обычная НТМГ-разметка. Второй — стандарт этот разработан для применения 
с ХНТМЕ, а не с НТМІ5. В настоящее время несколько сверхинтеллектуальных 
веб-гуру занимается разработкой лучших способов адаптирования КОРЕа для рабо- 
ты с НТМГ5. Но, возможно, что КрғҒа просто не приживется в мире НТМГ5, т. к. 
ему больше подходят строгий синтаксис и железные правила ХМІ. 


В этой главе стандарт КреЕа не рассматривается. Но если вы хотите узнать больше 
о нем, солидный обзор можно получить на сайте ћќр://еп.міКірейіа.ого/уікі/КреЕа. 
А на веб-сайте Соозе Вісһ Ѕпірреќѕ (см. разд. "Расширенные фрагменты страни- 
цы" далее в этой главе) можно ознакомиться с версиями Кра для всех примеров 
расширенных фрагментов Соов/е. 


Микроформаты 


Микроформаты предоставляют простой, прямолинейный подход к внедрению ме- 
таданных в веб-страницы, не придерживаются какого-либо определенного офици- 
ального стандарта и не являются таковым. Лучше всего микроформаты можно опи- 
сать как несвязанный набор соглашений, которые позволяют веб-страницам пре- 
доставлять структурированную информацию, не требуя сложных стандартов, 
наподобие ВОЕа. Благодаря этому подходу микроформаты пользуются огромным 
успехом; в недавнем исследовании, проведенном Соое, было обнаружено, что в 
94% страниц, содержащих какой-либо тип расширенных метаданных, эти метадан- 
ные предоставляются микроформатами. 


ПРИМЕЧАНИЕ 


Если судить на основе популярности микроформатов, то можно подумать, что исход 
битвы за семантический Интернет уже решен. Такое заключение будет преждевре- 
менным по нескольким причинам. Прежде всего, подавляющее большинство веб- 
страниц не содержит расширенных семантических данных вообще. Вдобавок в боль- 
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шинстве веб-страниц, применяющих микроформаты, это делается только в двух це- 
лях: для обозначения контактной информации и событий. И наконец, простота микро- 
форматов может удерживать их от применения для более продвинутых задач, осо- 
бенно когда уровень возможности НТМІ5 сравняется с их уровнем. Поэтому, хотя 
микроформаты никуда в ближайшее время не исчезнут, игнорировать их конкурентов 
тоже не стоит. 


Прежде чем помечать данные микроформатом, нужно выбрать, какой именно мик- 
роформат использовать для этого. Широко применяется всего лишь пара десятков 
микроформатов, большинство из которых продолжает совершенствоваться и об- 
новляться. Информацию о доступных микроформатах и подробное описание каж- 
дого из них можно найти на веб-сайте ВИр://исгоРогта6.ого/УЩКИМат_Разе-ги. 
Наибольшей популярностью среди всех этих микроформатов пользуются два: 
ҺСага и ҺСаІепаег, которые мы и рассмотрим в следующих двух разделах. 


Обозначение контактной информации 
с помощью микроформата ҺСага 


Микроформат ҺСага предоставляет универсальный способ обозначения контактной 
информации для физического лица, компании или места. По результатам последне- 
го подсчета Интернет содержит свыше 2 млрд ҺСага, что делает этот микроформат 
безоговорочно самым популярным. 


Микроформаты работают по инновационному методу — они добавляют свою ин- 
формацию поверх атрибута с1азз, который обычно используется для форматирова- 
ния. Данные помечаются, используя определенные стандартные названия стилей, 
на основе типа данных. Потом такую разметку может прочитать другая программа, 
извлечь помеченные данные и по атрибутам определить их значение. Для создания 
ҺСага требуется корневой элемент, который присваивает атрибуту с1азз значение 
усаха. Внутри этого элемента необходимо посредством другого элемента предоста- 
вить, по крайней мере, отформатированное имя. Атрибуту с1азз этого внутреннего 
элемента нужно присвоить значение ғп. Вот приводится пример такого опреде- 
ления: 


<аіу с1азз="усага"> 
<аіу с1азз="Еп">М1Ке Воме Еогтаїёбе</аіу> 
</аіу> 


При использовании для микроформата атрибута сіаѕѕ в создании соответствующе- 
го стиля с именем этого класса нет надобности, более того, это, скорее всего, толь- 
ко создаст путаницу. Вместо этого атрибуту сіаѕѕ дается другое задание — объяв- 
лять, что его содержимое является хорошо структурированными, осмысленными 
данными. 


Хотя единственной обязательной единицей информации для микроформатов ҺСага 
является имя, большинство из них содержит дополнительные подробности, такие 
как почтовый адрес и адрес электронной почты, ОКІ веб-сайта, номер телефона, 
дата рождения, фотография, должность, название организации и т. п. При условии 
использования правильных названий классов все эти подробности можно вставить 
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в элемент, содержащий класс хусага. В следующем листинге приводится пример оп- 
ределения ҺСага, содержащего разные типы персональной информации: 


<аіу с1азѕ="усага"> 
<аіу с1азз="Еп">М1ке Воме Еогпаібе</аіу> 
<іпо сІаѕз="рһоёо" ѕгс="Ғасе.јрд" аї="Міке'ѕ Ғасе"> 
<аіу сІаѕз="ёіб1е">йер реуе1орег</аіу> 
<аіу сІаѕз="орд">Тһе Масдіс Ѕетапііс Сотрапу</аіу> 


<а с1аѕѕ="ир1" Һгеғ="Һібр: / /ут.тасісѕетапіісѕ. сот"> 
мулт. мадісзетапіісз.сотм</а> 


<аіу с1аѕз="ёе1">641-545-0234</аіу> 
</аіу> 


СОВЕТ 


Информацию обо всех свойствах һСага см. на веб-сайте 
пир://тісгоѓогтаїѕ.ого/мікі/һсага-ги. 


В предыдущем примере мы рассмотрели, как создать ВСаг4 с самого начала, но 
микроформатом часто требуется пометить данные в уже существующих веб- 
страницах. Например, может потребоваться пометить форматом ҺСага контактные 
данные веб-страницы, чтобы сделать их доступными любой программе, понимаю- 
щей этот микроформат. Это довольно простая задача, при условии следования не- 
скольким правилам. 


П Часто важные данные будут смешаны с содержимым, которое не требуется вы- 
делять. В таком случае можно заключить в новый элемент каждую единицу ин- 
формации, которую нужно выделить. Для содержимого блочного уровня ис- 
пользуется элемент <аіу>, а для текстового — элемент <зрап>. 


П Не беспокойтесь о других элементах с разными названиями классов. При обра- 
ботке микроформата браузер игнорирует все, что не имеет распознаваемого на- 
звания класса. 


П Для обозначения микроформатом изображения можно использовать элемент 
<іпо>, а для ссылки — элемент <а>. В остальных случаях форматом будет, ско- 
рее всего, обозначаться простой текст. 


ассмотрим типичный пример обозначения микроформатом данных в существую- 
Р б 

щей странице. Допустим, у нас есть страница "АБои Ме", содержащая контактную 
информацию создателя веб-сайта (рис. 3.3). 


Обычная НТМГ-разметка этой страницы будет подобна следующей: 
<Һ1>Арооё Ме</ћ1> 


<іюа згс="Еасе.)ра" а1ё="Міке'ѕ Еасе"> 
<р>Тр1$ мерѕііе іѕ іһе могк оЕЁ <р>Міке Воме ЕогпаЕ®е</Ъ>. 
Н15 Ёгіепаз Кпом Б1м аз <р>Тће Від М</Ь>.</р> 


<р>Үои сап сопёасі Һһітм иһеге Һе могкѕ, аі 
Тһе Масдіс Ѕетапііс Сопрапу (рһопе 
641-545-0234 апа аѕк Ғог Міке) .</р> 
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<р>0х, \1$51Е Б1м іһеге аі:<рг> 

42 Јогаап Согаоп 5&геее, 6ЕВ Е1оог<рг> 

Зап Егапсізѕсо, СА 94105<рг> 

0ОЅА<рг> 

<а һгеЁ="Һіір: / /ммм.тад1сзетапЕ1с$.сот"> мии .тад1сзетапе1с$.сот</а> 


га Ех 


СЕНА. и 


< С а ҺСага.һті а 


АБоиї Ме 


Рис. 3.3. Страница "Абоиќ 
Ме" 
с контактной информацией 
создателя веб-сайта 


Тһіѕ мебѕіѓе 15 Һе могк оЁ Міке Коме РогтаЧе. 
Ніѕ ігіепаѕ Кпом Ыт аѕ Тһе Від М. 


Үои сап сопёасі һіт м/пеге һе ммогк$, аё Тһе 
Мадіс Ѕетапіїс Сотрапу (рһопе 641-545-0234 
апа азК ѓог Міке). 


Ог, ме Бит еге аё: 

42 Јогаап Согаоп 5\гее{, 6 һ Еоог 
Ѕап Егапсіѕсо, СА 94105 

ОЅА 


Мугу. тадісѕетапіісѕ.сот 


Добавив в эту разметку соответствующее микроформатирование, получим сле- 
дующий код: 


<Һ1>Ароџё Ме</һ1> 


<аіу с1аѕѕ="усага"> 
<іпа с1азз="рЬофо" ѕгс="Ғасе.јрд" аї="Міке'ѕ Ғасе"> 
<р>Тр1$ мерѕіёе 1$ іһе могК оЕ 
<ѕрап с1аѕѕ="ііб1е" зЕу1е="41зр1ау:попе">Меь реуе1орег</ѕрап> 
<р с1азз="Еп">М1ке Һоме Еогтаёёе</р>. 
Ніѕ Ёгіепаѕ Кпом Б1 аз < сІаѕѕз="піскпате">Тһе Від М</р>.</р> 
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<р>Уой сап сопёасі һіт хћеге һе могкѕ, аё 
<зрап с1аѕѕ="огд">Тһе Масіс Ѕетапііс Сопрапу</ѕрап> (рһопе 
<зрап с1аз5="%е1">641-545-0234</зрап> апа аѕк Ғог Міке) .</р> 


<р>0х, уіѕіё Ба &ёһеге аї:<рг> 


<ѕрап с1аѕѕ="ѕігееі-аййгеѕѕ">42 ЈогдӢап богадоп Ѕігееї, 
бЕВ Е1оог</ѕрап><рг> 


<зрап с1аз$="1оса11%у">бап Егапсіѕсо</ѕрап>, 
<зрап с1аѕѕ="гедіоп">СА</ѕрап> 
<зрап с1азз5="розфа1-соде">94105</зрап><г> 
<зрап с1аѕѕ="соџпёгу-пате">05А</ѕрап><рг> 
<а с1аз5="ак1" Һгеғ="Һібр: / /ут.тасісѕетапіісѕ. сот"> 
мулт .падісзетњапіісз.сотњ</ а> 
</аіу> 


Для вставки микроформата над исходной разметкой были выполнены следующие 
преобразования. 


П Добавлено несколько новых элементов <зрап> в качестве оболочки для содер- 
жимого, требуемого классу усаха. 


П Там, где это уместно, вместо элемента <ѕрап> добавлены атрибуты с1азз в уже 
существующие элементы. Например, информация об имени уже вставлена 
в элемент <>, поэтому нет надобности добавлять новый элемент <зрап>. (Ко- 
нечно же, ничто не запрещает делать это. Например, если требуется одновре- 
менно пометить и отформатировать имя, может быть, предпочтительнее исполь- 
зовать что-то наподобие <р с1азз="Кеумога Етрһазіѕз"><ѕрапс1аѕѕ="#п">Міке Вомз 
Еогтабе</ѕрап></р>. Но в таком случае правила таблицы стилей следует дер- 
жать отдельно от микроформата.) 


П Для указания рода занятий лица (ЖеБ Оеуе1орег) применяется скрытая единица 
содержимого. Показывать эту информацию на странице нет надобности, т. к. 
она уже очевидна из предложения "Тһиѕ уебѕіќе 15 Пе \огК ОЕ..." ("Этот веб-сайт 
создан"). Но этот метод еще надо обсудить, т. к. некоторые средства (например, 
Соое]е) не обращают внимания на информацию в разметке, которая не предос- 
тавляется для просмотра посетителю страницы. 


Теперь давайте рассмотрим, какой результат мы получим в ответ на все наши уси- 
лия, приложенные к оформлению микроформатом необходимых данных на страни- 
це. Хотя ни один из существующих браузеров не имеет естественной поддержки 
микроформатов (по крайней мере, на момент написания этой книги), существуют 
разнообразные подключаемые модули и сценарии, которые могут дать им эту воз- 
можность. Пользу от такой возможности не трудно вообразить. Например, браузер 
мог бы обнаружить элементы ҺСага на странице, вывести их список в боковой 
панели и предоставить пользователю команды, позволяющие добавить любое лицо 
из списка в личную адресную книгу пользователя так же быстро, как и добавить 
страницу в закладки. Информацию о подключаемых модулях браузера для под- 
держки микроформатов можно получить на веб-сайте Һќёр://тісгоѓогтаѓѕ.ого/ 
уіКі/гоуѕегѕ. 
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Одним из таких расширений является Оотрћ для Ниегпе! Ехр]огег, которое можно 
загрузить с веб-сайта В р://оотрВ.содерех.сот. Этот модуль автоматически ис- 
следует каждую посещаемую веб-страницу на предмет наличия в ней трех микро- 
форматов: ҺСага (для контактной информации), ҺСаІепааг (для календарей собы- 
тий) и ҺМейа (для изображений, аудио и видео). В случае обнаружения в странице 
данных, помеченных одним из этих форматов, в левом верхнем углу окна браузера 
выводится значок Оотр (рис. 3.4, вверху.) Щелчок по этому значку выводит в окно 
браузера всю обнаруженную информацию, а также элементы управления для ее 
обработки (рис. 3.4, внизу). 


[9 Сага Ехатріе р 


< С О пеу//С:/НТМІ5/Сһарїег%2003/һСага.һіті х & 


| Оотрн: А Місгоѓогтаї Омейау 


13) ҺСага Ехатріе р 


Є С О е///С:/НТМІ5/Сһарїег%2003/һСага.Һті х % 


Міке Коме Еогтаце 


уіѕітіх.согту/іаБ5/.../усаг 


Рис. 3.4. Вверху: сигнальный значок указывает, что Оотрћ нашел, по крайней мере, одну единицу 
информации, помеченную микроформатом. Внизу: щелчок по значку выводит всю информацию, включая 
карту связанного географического местоположения и кнопку для переноса контактной информации в 
адресную книгу электронной почты. Если страница содержит несколько разных микроформатов, также 
выводятся ссылки, с помощью которых можно просмотреть все разделы ПСага, ҺСаіепааг и ҺМедіа 


Но что особенно интересно в этом инструменте, так это возможность использовать 
его другим способом — через библиотеку Јауа$сгірї. Для этого всего лишь нужно 
добавить в страницу ссылки на сценарии: 


<Һеаа> 
<пе+а сһагѕеё="оё#-8"> 
<іібІе>ҺСага Ехапр1е</1%1е> 
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<ѕсгірі ѕгс="јаџегу-1.3.2.тіп.јѕ"></ѕсгірё> 
<ѕсгірё згс="оотрһ.тіп.јѕ"></ѕсгірё> 


</Һћеаа> 

Теперь все посетители вашей страницы получат возможность доступа к помечен- 
НЫМ микроформатами данным страницы, независимо от используемого ими брау- 
зера. Надо сказать, что именно таким образом пример, показанный на рис. 3.4, ра- 
ботает В браузере Срготе. Вы также можете попробовать эту возможность в своем 


браузере, посетив наш сайт по адресу ћќќр://ууууу.ргоѕеіесһ.сотЉіті15/ и щелкнув 
по ссылке Місгоѓогтаѓќѕ.һёті в разделе Сһарќег 3. Меапіпоѓи! МагКор. 


ПРИМЕЧАНИЕ 


Модуль Оотрћ следует рассматривать как демонстрацию принципиальной возможно- 
сти реализации средств, использующих микроформаты, а не как инструмент для прак- 
тического использования. Наилучшим шансом для будущего успеха микроформатов 
будет их прямая поддержка основными браузерами, точно так браузеры Іпќегпеї 
Ехр!огег, Еігеїох и Ѕаїагі поддерживают каналы К55 в настоящее время. Например, 
при открытии страницы какого-либо блога в Еігеїох этот браузер автоматически обна- 
руживает канал К$$ и предоставляет пользователю возможность создать "живую" за- 
кладку. Как раз эта дополнительная возможность сможет сделать микроформаты по 
настоящему полезными. 


Обозначение событий с помощью микроформата ҺСаіепдаг 


Вторым по уровню популярности микроформатом является ҺСаІепааг, предостав- 
ляющий простой способ для разметки событий. Например, с помощью этого мик- 
роформата можно помечать встречи, собрания, праздники, выпуски продукции, от- 
крытия магазинов и т. п. В настоящее время в Интернете есть десятки миллионов 
событий, помеченных микроформатом ҺСаІепіаг. Пример отображения одного 
такого события показан на рис. 3.5. 


Если вы разобрались в том, как помечать информацию микроформатом ҺСагӣ, у вас 
не будет никаких трудностей и с микроформатом ҺСаІепааг. Сначала событие нуж- 
но поместить в элемент с названием класса уеуепе. Внутри этого элемента нужно 
поместить, по крайней мере, две единицы информации: дату начала (которая поме- 
чается классом аєѕсагїє) и описание события (которое помечается классом зиттаху). 
Дополнительно можно вставить разные необязательные атрибуты (описание кото- 
рых см. на ћќєр://тісгоѓогтаѓѕ.ого/уікіЉсајепааг-ги), включая конечную дату или 
длительность события, место его проведения, а также ОКІ страницы, содержащей 
более подробную информацию о событии. Далее представлен пример кода для по- 
метки события: 


<аіу с1азз="уеуепе"> 
<һ2 с1азз="эитагу">Мер Юреуе1орег С1ам Ваке</ћ2> 
<р>І'тм һозііпд а рагіу!</р> 
<р>Іё'ѕ 
<ѕрап с1аѕз="аёѕёагі" іі+1е="2011-10-25Т13:30">Тиоеѕаау, 
Осіорег 25, 1:30РМ</зрап> 
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аі ЕПе <ѕрап сІаѕѕ="1Іосаёіоп">реер Ѕеа Ноёе1, бап 
Егапсізсо, СА</зрап></р> 


</аіу> 


Дату следует форматировать согласно требованиям универсального формата дан- 
ных (см. разд. "Обозначение дат и времени с помощью элемента <йте>" ранее 
в этой главе). Но есть и обходное решение — машиночитаемую информацию о дате 
можно предоставить с помощью атрибута +і1е, а потом использовать любой, нра- 
вящийся вам текст. К сожалению, в настоящее время для микроформатов не суще- 
ствует автоматического способа использования информации в атрибуте дасебіте 
НТМЕ5-элемента <е1пе>. Но этот недостаток устранен в стандарте микроданных, 
который рассматривается в следующем разделе. 


Бегала 


| Веп & Јеггу'ѕ Егее Сопе Оау | Ғасероок |+ | > 


| Є ) Е) һур://иллг.Ғасероок.соту/еуепі.рһр?еіі=192075224168154 - аа. в: 
б Сопёасіѕ (1) ГосаНоп5" Тадѕрасеѕ” Вооктагкѕ Кеѕошгсеѕ {| Орноп$ 


Оп Арм 1241, 10 ат - 9 рт $юор Бу 5еарой УШаде‘ і... » Ехрогї Емепё 

Ада їо 30 Вохеѕ 
Вооктагк мВ Рігеѓох 
Ааа їо боодіе Са|епдаг 


Е ЕасеБоок һеірѕ уои соппесЕ апі ѕһаге мї е рео _ А990 Үаһоо! Саіепдаг 


Бро АИ 


Веп & Јеггу'ѕ Егее Сопе Вау 


Ѕһаге · РиЫіс Еуепё 


Тиездау, Ар 12 * 9:00ат - 9:00рт 
Ѕеарогї Маде 


Ѕеарогї УЙаде 


Рис. 3.5. Во всех страницах событий Ғасебоок события помечаются микроформатом ҺСаіепааг, 
а место события — микроформатом ҺСага. Благодаря этому, с помощью расширения браузера 
посетители страницы могут записать эти данные на свой компьютер. (Для браузера Еігеѓіох можно 
воспользоваться расширением Орегаќог, загрузить которое можно по адресу 
ћір://аааопѕ.тог2іПа.огд/ігеѓох/аааоп/орегаїог.) 


Микроданные 


Еще одним подходом к решению задачи придания семантического смысла разметке 
веб-страниц являются микроданные. Формат микроданных зародился как часть 
спецификации НТМІ 5, но потом был выделен в отдельный развивающийся стан- 
дарт (см. ћр://деу.уЗ.огоЉћті5/тпа). В микроданных применяется подход, подоб- 
ный стандарту ВПОЕа, но проще. В отличие от микроформатов, микроданные имеют 
собственные атрибуты, что устраняет возможность конфликта с правилами таблиц 
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стилей (или озадачивания веб-разработчиков, пытающихся разобраться в чужом 
коде). Такой подход делает форматы микроданных более логичными, чем другие 
форматы, а также более приспосабливаемыми к использованию с языками собст- 
венной разработки других веб-дизайнеров. Но за это приходится платить ценой по- 
тери краткости — помеченная микроданными разметка может быть несколько 
большего объема, чем разметка, помеченная микроформатами. 


ПРИМЕЧАНИЕ 


Так как микроданные являются самым новым стандартом, пока еще не ясно, сможет 
ли он закрепиться или уступит место другим, более упрочившимся стандартам (воз- 
можно, микроформатам для несложных применений и какой-либо модифицированной 
форме ЕКОРа для более сложных). Но в любом случае, время на изучение микродан- 
ных не будет потрачено даром. Как мы увидим в следующем разделе, этот подход уже 
поддерживается бооде. Кроме этого, он очень похож на КОЕ — до такой степени, что 
в случае, если один из этих форматов возьмет верх над другим, можно будет пере- 
ключиться на него без больших трудностей. 


Чтобы создать блок микроданных, нужно добавить атрибуты 1Еемзсоре И ібетёур 
в любой элемент (хотя логичнее будет создать элемент <аіу>, если такого еще нет). 
Атрибут ісеюѕсоре указывает на начало нового фрагмента семантического содер- 
жимого, а атрибут ++етеуре — конкретный тип данных, которые помечаются: 


<а1у ібетѕсоре ібетёуре="Һёр: / /аӢаба-уосари1агу.огд/Регѕоп"> 

</аіу> 

Тип данных обозначается предопределенной, однозначной текстовой строкой, на- 
зывающейся пространством имен ХМІ. В данном примере пространством имен 


ХМІ является формат для кодирования контактной информации Һќёр://даќа- 
уосаршагу.оге/Регѕор. 


Пространства имен ХМГ часто даются в виде ОКІ. Иногда по этому ОВГ можно 
даже просмотреть описание соответствующего типа данных, открыв его в браузере. 
Но пространства имен ХМІ не обязательно должны соотноситься с настоящими 
веб-сайтами, а также они не обязательно должны быть указаны в виде ОВГ. Назва- 
ние пространства имен формата просто зависит от того, что лицо (или лица) выбе- 
рет для него при создании этого формата. В этом отношении преимуществом ОВГ, 
является то, что он может содержать доменное имя, принадлежащее лицу или орга- 
низации. Это повышает шансы названия пространства имен в плане однозначности, 
т. е. что никто не создаст иной формат данных с таким же названием пространства 
имен и тем самым собьет всех с толку. 


Следующий шаг после создания элемента-контейнера — это использование внутри 
его атрибута ісепргор, чтобы отловить важные единицы информации. Для этого 
применяется такой же базовый подход, что и для микроформатов — используется 
распознаваемое название 1+епргор, которое позволит другим программным средст- 
вам извлекать информацию из связанных элементов. По существу, самая большая 
разница между микроданными и микроформатами состоит в использовании 
в первых для маркировки данных атрибута ісепргор, а не атрибута с1азз, как в по- 
следних. 
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<аіу 1$емзсоре ібетіуре= "Һр: / /Чака-уосаро1агу.ога/Регзоп"> 


<зрап ібешргор="пате">Міке Коне Ғогтаёбе</ѕрап>. 
</аіу> 
Микроданные также несколько больше структурированы, чем микроформаты. На- 
пример, в них часто один тип данных вкладывается в другой. Таким образом, для 
подробной контактной информации можно вложить в нее сведения об адресе. Тех- 
нически, вся информация об адресе относится к отдельному типу данных, который 
определяется другим пространством имен ХМГ. Поэтому нам нужен новый эле- 


мент <аіу> ИЛИ <зрап> с атрибутами 1$етзсоре И іёепіуре, Как показано в следую- 
щем коде: 


<а1у ібетѕсоре ібепгіуре="Һёбр: / /4аЕа-уосаБа1аку.огд/Регзоп"> 


<ѕрап іёетргор="аййгеѕѕ" ібетѕсоре 
іъетёуре="Һ ёр: / /ааёа-уосари1агу.огд/Аййгеѕѕ"> 
<ѕрап ібепргор="ѕігееі-аййгеѕѕ">42 Јогдап Сбогаоп Ѕігееї, 
6ћ Р1оог</ѕрап><рг> 
<зрап ібетргор="1оса1іёбу">Зап Егапсіѕсо</ѕрап>, 
<ѕрап іёешргор="гедіоп">СА</ѕрап> 
</зрап> 
</аіу> 


Применяя эти правила, исходную разметку страницы "АБбоші Ме" (см. 
разд. "Обозначение контактной информации с помощью микроформата ҺСаға" 
ранее в этой главе) можно пометить в формате микроданных. Результаты такого 
форматирования, в которых внесенные изменения выделены жирным шрифтом, 
показаны в следующем листинге: 


<Һ1>Ароџі Ме</һ1> 


<а1у ібетѕсоре ібепгіуре="Һёбр: / /4аЕа-уосаБа1аку.огд/Регзоп"> 
<ілта ібешргор="рћоёо" ѕгс="Ғасе.јро" а1Е="М1ке'5 Ғасе"> 
<р>тТһіѕ мерѕііе 1$ іһе могК оЕ 
<зрап ібешргор="біёІе" ѕіу1е="аізр1ау:попе">йер реуе1орег</ѕрап> 


<р ібетргор="пате">Міке Воме Еогпаіёе</р>. 
Ніѕ Ёгіепаз Кпои һіт аз <р ібетргор="піскпате">Тһе Від М</0>.</р> 


<р>Уой сап сопёасі һітм хћеге һе могкѕ, аё 
<зрап 1%етргор="аЕЕ111а1оп">Тре Мад1с Ѕетапііс Сотрапу</ѕрап> (рһопе 
<зрап ібешргор="ёбе1">641-545-0234</зѕрап> апа азК Ғог Міке) .</р> 


<р>Ор, \151Е Бла іһеге аї:<рг> 
<ѕрап іёетргор="аййгеѕѕ" ібетѕсоре 
1%$етёуре="Ь р : / /ааъа-уосари1агу.огд/Ааігеѕѕ"> 
<зрап іёешргор="ѕёгееё-аййгеѕѕ">42 ЈогдӢап Согаоп 5Ехееф, 
бЕВ Е1оог</ѕрап><рг> 
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<зрап 1%епргор="1оса11+у">5бап Егапс1$со</зрап>, 

<зрап ібешргор="гедіоп">СА</ѕрап> 

<ѕрап ібетргор="роѕёа1-сойе">94105</ ѕрап><рг> 

<зрап іёетргор="соџпігу-пате">05А</ зрап><рг> 
</зрап> 


<а 1фепргор="иг1" птеЁ="В Е: / /ммм.пад1сзетапе1с$.сощ"> 
умуту. мадісзетапіісз.сот</а> 


</аіу> 


Как вы, наверное, заметили, это форматирование поразительно похоже на форма- 
тирование посредством стандарта ҺСага (см. разд. "Обозначение контактной ин- 
формации с помощью микроформата ћСағӣ" ранее в этой главе). Хотя названия 
свойств сместились с атрибута с1азз в атрибут ісетргор, в этом форматировании 
все равно используются все те же названия свойств (за исключением названий #п и 
ога, которые были заменены на папе И а#ғі1іабіоп соответственно). А если вы знае- 
те формат ВОГа, то обнаружите еще большее соответствие, потому что как в мик- 
роданных, так и в КОЕа используется один и тот же формат данных ћќќр:// 
даќа-уосаршигу.ого/Регѕоп. 


ПРИМЕЧАНИЕ 


Все три стандарта для данных с расширенной семантикой — ВОҒа, микроданные и 
микроформаты — очень похожи друг на друга. Не то, чтобы эти стандарты были пол- 
ностью совместимы, но их форматирование достаточно сходное, вследствие чего на- 
выки, приобретенные при изучении одной системы, можно применить для работы 
с другими. 


Микроданные имеют один значительный недостаток: на текущий момент не суще- 
ствует ни подключаемых модулей для браузеров, ни ЈауаЅстірі-сценариев, которые 
могли бы извлекать помеченные этим форматом данные из страницы. Но микро- 
данные повышают шансы попадания страницы в результаты поиска, что мы и рас- 
смотрим в следующем разделе. 


Расширенные фрагменты страницы 


Если вы битком набьете свою веб-страницу семантическими подробностями, то 
заслужите довольно серьезную репутацию веб-фаната. Но даже самым заядлым 
веб-разработчикам нужна какая-то отдача, чтобы оправдать требующиеся для этого 
дополнительные усилия (да и более загроможденную разметку, полученную в ре- 
зультате). Хорошо мечтать о мире сверхинтеллектуальных, понимающих семанти- 
ку браузерах, но на сегодняшний день жестокая правда жизни такова, что для веб- 
браузеров существует лишь несколько экспериментальных и малоизвестных моду- 
лей расширения, способных извлекать семантически помеченные данные из стра- 
НИЦЫ. 


К счастью, способ получить отдачу от использования расширенной семантики 
В своих веб-страницах все же есть. Называется этот способ оптимизацией под по- 
исковые системы. Это искусство сделать веб-сайт более заметным для поисковых 
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систем. Иными словами, это способ частого попадания веб-сайта в результаты по- 
иска, улучшения его ранжирования по определенным ключевым словам, а также 
повышение вероятности, что создатель запроса для поиска выберет именно этот 
веб-сайт из многих других результатов поиска. Для решения последней из этих за- 
дач и предназначен способ представления результатов поиска, разработанный ком- 
панией Соо2]е — расширенные фрагменты страниц (псВ ѕпірреѓѕ). Заключается он 
в том, что поисковая система Сооз]е использует семантическую информацию о со- 
держащейся в странице информации, чтобы представить эту информацию в усо- 
вершенствованном виде, вследствие чего данный веб-сайт будет выделяться из 
других результатов поиска. 


Но прежде чем приступить к использованию расширенных фрагментов страниц, 
нужно получить более подробное представление об этом термине. Расширенными 
фрагментами страниц компания Соо2е называет данные, помеченные семантиче- 
скими стандартами ВРЕа, микроформатами или микроданными. Как мы уже узна- 
ли из вышеизложенного материала, все эти три подхода очень похожи друг на дру- 
га и предназначены для решения одной и той же задачи. Но Соое ставит перед 
собой целью рассматривать их все как равноправные, поэтому не имеет значения, 
какой из этих подходов вы предпочитаете. (В следующих примерах используются 
микроданные, чтобы помочь вам лучше разобраться с самым новым семантическим 
стандартом языка НТМІ5.) 


Для дополнительной информации о стандартах, поддерживаемых расширенными 
фрагментами страниц, обратитесь к документации Соое по адресу Һќёр:// 
Чпуш1.сот/Соое с $ шрреб. Здесь можно найти не только приличный обзор 
КрғҒа, микроформатов и микроданных, но также много разнообразных примеров 
расширенных фрагментов (например, контактная информация, события, товары, 
обзоры, рецепты и т. п.). Для каждого примера есть версия под ВОЕа, микроформа- 
ты и микроданные, что может помочь вам преобразовать свои семантические навы- 
ки из одного стандарта в другой, если возникнет такая нужда. 


Расширенные результаты поиска 


Посмотреть, как работают расширенные фрагменты, можно с помощью инструмен- 
та Кісһ Ѕпірреіѕ Тезнпе Тоо! (КЗТТ, инструмент тестирования расширенных фраг- 
ментов). Этот инструмент исследует предоставленную ему веб-страницу, показы- 
вает семантические данные, которые поисковая система Соое может извлечь из 
этой страницы, а потом показывает, каким образом Соое может использовать эту 
информацию, чтобы представить страницу наилучшим образом в результатах 
чьего-либо поиска. 


ПРИМЕЧАНИЕ 


Инструмент КТТ полезен по двум причинам. Первая: он помогает проверять семан- 
тическую разметку. (Если Соодіе не может извлечь всю информацию, которую вы по- 
местили на страницу, или если помещает некоторую из этой информации в непра- 
вильную категорию, вы знаете, что где-то сделали ошибку.) Вторая: он показывает, ка- 
ким образом семантические данные могут изменить ее представление в результатах 
поиска Соодјіе. 
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Порядок использования инструмента КТТ следующий: 


1. Откройте в браузере страницу уүү.соо2е.сот/уертаѕќегѕ/(0015/гісһѕпірреќѕ. 
Эта простая страница содержит одно текстовое поле (рис. 3.6). 


2. Введите в текстовое поле ОКІ страницы, семантику которой вы хотите исследо- 
вать. К сожалению, инструмент КТТ работает только со страницами, предос- 
тавляемыми веб-серверами, поэтому с его помощью нельзя проверить страницу, 
хранящуюся на локальном жестком диске. 


Сооде использовал некоторые 
из семантических данных страницы, 
Адрес страницы для тестирования чтобы создать эту строку 


Вісһ Ѕ$пірреѓѕ Тез пд Тоо! 


Џѕе їће сп Ѕпірреїѕ ТезНпд Тоо! {о сһеск {һаї Соодіе сап Єоггесіу рагѕе уоиг ѕїгисішгед даќа тагкир 
апа діѕріау й іп ѕеагсһ гезий$. 


Тез: уоиг мебѕіќе 


Епїег а меб раде ОКЕ їо зее һом її тау арреаг іп зеагсй гезий$: 


һёр://ргоѕеїесһ.сот/ргоѕеїесһ/тісгодаіа.Һл| 


Ехатрез: Вемемз, Реоре, Ехепіѕ, Кесіреѕ, Ргойисі 


Соод!е ѕеагсћ ргемеми 


Місгодаїа Ехатріе 

Зап Ргапсіѕсо СА - Мер Оеуеорег - Тһе Мадіс Ѕетапііс Сотрапу 
Тһе ехсегрї тот їће раде ми ѕһом ир һеге. Тһе геаѕоп ме сапї зһом їехї гот уоиг 
мерраде іѕ Бесаизе {йе {ех{ дерепаѕ оп {ће диегу {һе изег{урез. 
ммум.ргоѕеќесһћ.сот/ргоѕеѓіесһ/тісгодгѓа.һті - Сасһед - Ѕітііаг 


Мое їһаї їһеге іѕ по диагапїее {ПаЁ а Кісһ Әпірреї ми Бе ѕһомп їог #һіѕ раде оп асіџа! ѕеагсһ гезий$. 
Рог тоге деѓаііѕ, ѕее {пе РАО. 


Ехігасќеа гісћ ѕпірреї даќа пот ће раде 


кет 
Туре: һіїр://даѓа-уосабиагу.огд/регѕоп 
рћоќо = Һір://угуғу.ѕидагреаї.са/ргоѕеќесһ/асе.јро 
йе = Мер ОеуеІорег 
пате = Міке Коме Рогтаќе 
піскпате = Тһе Від М 
аћіаіоп = Тһе Мадіс Ѕетапііс Сотрапу 
{е| = 641-545-0234 
аддгез$ = №ет( 1 ) 
ий = Мр:/Ллмилм. тадісѕетапіісѕ.сот/ 


Кет 1 
Туре: ћїр://даѓа-уосабиіагу.огд/аййгеѕѕ 
э{гее!-а4агез$ = 42 Јогдап Согдоп Ѕіїгееї, 61 РІоог 
Іосаіќу = Зап Ргапсіѕсо 
гедіоп = СА 
роз{а|-соде = 94105 
соитгу-пате = УЗА 


СооЧе также нашел адресную Ооодіе нашел на странице 
информацию контактную информацию 


Рис. 3.6. В данном примере Соодіе нашел в странице контактную и адресную информацию лица 
(см. пример на основе разметки микроданными в разд. "Микроданные" ранее в этой главе). 
Используя эту информацию, Соодіе вставил текстовую строку серого цвета под строкой с заголовком 
страницы, включив в нее некоторую персональную информацию 
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3. Нажмите кнопку Ргемеу. В окне браузера будут выведены результаты анализа 
(см. рис. 3.6). В этих результатах особый интерес представляют два раздела. 
В разделе Соофе ѕеагсһ ргеуіеуу показано, как страница может отображаться 
в результатах поиска. А в разделе Ехќігасќеа гісһ ѕпірреќ даа гот Ше разе ото- 
бражаются все необработанные семантические данные, которые Соозе смог из- 
влечь из разметки страницы. 


СОВЕТ 


Если Соодіе выводит сообщение об ошибке "ІпѕиЁйсіепі даа їо депегае {ће ргемем", 
то возможны три причины. Первая: ваша разметка может быть неправильной. Иссле- 
дуйте извлеченные Соодіе необработанные данные и убедитесь, что он нашел все 
помеченные вами данные. Если здесь все в порядке, то, возможно, вы применили тип 
данных, которые Сооде еще не поддерживает, или же не предоставили обязательный 
минимальный набор свойств, требуемый Соодіе. Чтобы определить причину пробле- 
мы, сравните свою разметку с одним из примеров Соодіе на сайте Һір:// 
іїпуий.сот/боодіеВісћЅпірреїѕ. 


Соое]е использует довольно умеренный способ выделения контактной информа- 
ции. Но контактная информация — это только один из типов расширенных данных, 
распознаваемых Сбооғ]е. В разд. "Обозначение событий с помощью микроформата 
рСшепааг" ранее в этой главе мы рассмотрели, как определять события, используя 
микроформаты. Такие данные также могут быть включены в результаты поиска 
Ооо$е для страницы (рис. 3.7). 


Тпе ЕШтпоге Ме\ми Үогк а гута Р!аха Сопсей Тіскеїѕ, Зспедие ... 

Виу Тһе Е тоге Меми Үогк аї Ігуіпо РІаға їіскеїѕ апа ћпа сопсей эсНедшез, уепие 
іпғогтайіоп, апа зеа{пд сһагіѕ ѓог Тһе ЕИтоге М№ему Үогк аї Ігиіпо ... 

еа 2ерреііп 2 Ѕаї, Јап 23 
Спеар ТисКк мі Јаѕоп Ғаікпег Моп, Јап 


Нір Нор Кагаоке Сһатріопѕћір Рп, Јап 29 
уллу. імепаїоп.сот/...Аһе-й11ппоге-пеүу-уогк-аї-ігуіпд-ріаға-пем-уогк-пу-ііскеїѕ - 
сасһед - Ѕітііаг - 


Рис. 3.7. В этом примере страницы есть три события. Если для события предоставить УВЕ 
(как сделано для этого примера), Соодіе оформляет каждое событие как ссылку 
на соответствующий УВЕ 


Соозе также находит информацию о компаниях (которая обрабатывается по боль- 
шому счету как и персональная контактная информация), рецепты (которые мы 
рассмотрим вкратце в следующем разделе) и обзоры (которые рассматриваются 
далее в этом разделе). 


В следующем примере показан текст обзора заведения, отформатированный мик- 
роданными. Тип данных для разметки обзора определен на В@р://аайа- 
уосаршагу.ого/КЌеуіеу. Ключевые свойства включают предмет обозрения (в дан- 
ном случае ресторан), обозревателя и описание. Можно также включить одно пред- 
ложение общего впечатления (свойство зиттагу), дату, когда обозрение было сде- 
лано или опубликовано (свойство аЕтеу1емеа, которое поддерживает элемент <Е1те> 
из НТМГ5), а также оценку по шкале от 0 до 5 (свойство гасіпо). 
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Разметка с микроданными, выделенными жирным шрифтом, выглядит таким об- 
разом: 


<аӢіу 1%етзсоре ібетёуре="Һёр: / /4аЕа-уосаБа1аку.огд/Веу1ем"> 
<һ1 ібешргор="іёетгеуіемей">Јап'ѕ Р12га Ноцзе</һ1> 


<р>Веу1емеая Бу <зрап іёетргор="геуіемег">Јагеа Е1регааі</зѕрап> оп 
<Е1ме ібешргор="аёгеуіемей" дафеЕ1те='2011-01-26">Запаахгу 26</Е1ще>.<р> 
<р 16етргор=" заптаку">Рге фу раа, апа ЕПеп Ее 
Неа1Е А Берагемере зВомеая ир.</р> 

<р ібешргор="деѕсгірііоп">І һаа ап огде іо таск оп зоще ріхха, апа 015$ 
р1асе маз һе оп1у јоіпі агоџпа. Іі 1Іоокеа 1іке а рі о? а аіхе, 

рае І мепі іп һоріпа їо Ғіпа ап опаізсоуегеа дет. Іпзіеаа, І маісһеа а 
Неа1+ћ рерагітепі іпѕресіог с1оѕіпд ће р1асе дӢоуип. Уега1сЕ? І аіап' 
деб іо Ғіпіѕһ ту р12ха, апа һе іпѕресіог гесоптпепаѕ а Нер-С ѕһћоі.</р> 
<р>ВаЕ1па: <ѕрап ібетргор="габіпо">0.5</ѕрап></р> 

</аіу> 


Страницу с такими данными СооеІе обрабатывает особым образом (рис. 3.8). 


Јап'ѕ Рига Ноџѕе 
жуй Бемем Бу Јагеа ЕЪегад! - Јап 26, 2011 
Тһе ехсегрЕ гот {пе раде ммИ ѕһоз ир һеге. Тһе геаѕоп ме сап\ эПо\и їехї тот уоиг 


мерраде іѕ Бесаизе {һе {ехЁ дерепаз оп {ће диегу {ће иѕег {урез 
ммлу.ѕидагреаї.са/ргоѕеќесһ/тісгодаќа геміем.һіті - Сасһед - Ѕітіаг 


Рис. 3.8. Этот обзор по-настоящему выделяется среди других результатов поиска. 
Звездочки рейтинга бросаются в глаза и немедленно привлекают интерес к этой странице 


АВАРИЙНАЯ СИТУАЦИЯ 
Что делать, если Соод!е не обращает внимания 
на ваши семантические данные? 


Сам факт, что Соодіе может отображать особым способом семантически расширен- 
ную страницу, еще не означает, что он обязательно это сделает для конкретной стра- 
ницы. Он применяет свой набор полусекретных правил, чтобы определить, представ- 
ляет ли семантическая информация интерес для создателя запроса. Но если вы не 
хотите, чтобы Сооде наверняка игнорировал ваши данные, убедитесь в том, что ваша 
разметка не удовлетворяет одному из следующих утверждений. 


• Семантические данные не отвечают главному содержимому страницы. Ины- 
ми словами, если вы влепите свою контактную информацию на страницу о рыбной 
ловле, Сооде, скорее всего, не возьмет вашу контактную информацию. (Ведь ко- 
гда поисковый движок исследует эту страницу, он, вероятнее всего, ищет что-то 
имеющее отношение к рыбной ловле, а адрес и название бизнеса не имеют ника- 
кого смысла в этом отношении.) С другой стороны, если вставить контактную ин- 
формацию на страницу резюме, вероятность ее использования будет намного выше. 


® Семантические данные скрыты. Соодіе не использует НИКАКОГО содержимого, 
скрытого посредством С$$. 


» Веб-сайт содержит очень небольшой объем семантических данных. Если веб- 
сайт содержит мало страниц с семантическими данными, Соодіе может нечаянно 
пропустить их. 


Старайтесь избегать этих ошибок, и вы можете рассчитывать на расширенное ото- 
бражение вашей страницы в результатах поиска. 
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Движок для поиска кулинарных рецептов 


Расширенное отображение результатов поиска — это, безусловно, ловкий прием, 
который может направить дополнительный трафик на ваш веб-сайт. Вместе с этим 
хочется получить что-то еще более впечатляющее за свои усилия, затраченные на 
овладение навыками работы с семантическими данными. К счастью, гениальные 
разработчики боое]е не сидят без дела и воплощают будущее области поиска, и по 
всем признакам этим будущим окажется семантика. 


Одна блестящая идея в этом отношении состоит в использовании семантической 
информации не для того, чтобы улучшить отображение страницы в результатах по- 
иска, а для того, чтобы повысить избирательность поиска. Например, если соиска- 
тели работы будут помечать свои резюме с помощью КОЕа, микроформатов или 
микроданных, Ооо е может предоставить специализированное средство для поис- 
ка резюме, которое сканирует эти данные, просматривая резюме на всех популяр- 
ных работодательных веб-сайтах и игнорируя все другие типы веб-содержимого. 
Такой движок поиска резюме также можно было бы оснастить улучшенными 
фильтрационными возможностями, чтобы позволить компаниям находить кандида- 
тов, которые, например, имеют конкретную квалификацию или работали на опре- 
деленные компании. 


В настоящее время Ооо не имеет такого движка поиска резюме, но недавно эта 
компания выпустила что-то концептуально очень похожее и, возможно, более 
практичное: средство для поиска кулинарных рецептов. 


К этому времени вы, наверное, уже можете представить себе, как выглядят данные 
кулинарных рецептов, помеченные микроформатом или микроданными. Весь ре- 
цепт заключается в контейнер, который имеет формат данных рецептов (вот этот 
формат — В@р://дава-уосабщагу.ого/Весфе). Контейнер имеет отдельные свойст- 
ва для названия рецепта, имени составителя и фотографии готового продукта. 
Можно также добавить свойство для одного предложения обзора и свойство ДЛЯ 
пользовательского рейтинга. 


В следующем листинге показана часть разметки рецепта: 


<аіу ібепѕсоре 1фетёуре="В р : / /аӢаба-уосари1агу.огд/Весіре"> 
<Һ1 ібетргор="пате">Е1іесдапі Топаіо Ѕоцр</ћ1> 
<іпо ібетргор="рһоёо" ѕгс="ѕоџр.јро" аїб="А Бом1 оЁ опао зоир"> 
<р>Ву <зрап ібетргор="ацёћог">Місһае1 Сһіаге110</ѕрапх/р> 


<р ібепргор="ѕиппагу">Коаѕіеа ёотаіоеѕ аге іће Кеу їо 
аеуе1оріпод ёһе гісһ Е1ауог оЁ +һіз ёотаїо зоџр.</р> 


После этого можно добавить ключевую информацию о рецепте, в том числе время 
подготовки, время приготовления и объем готового блюда. Можно также добавить 
вложенный раздел с информацией о пищевой ценности (включая размер порции, 
калорийность, жирность и т. п.): 


<р>Ргер біте: <Е ше іёешргор="ргерТіте" дабеііте="РТЗОМ">30 тіп</біте></р> 
<р>Соок біте: <Е ше іёешргор="соокТіте" ЧафеЕ1те="РТ1Н">40 тіп</ёіте></р> 
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<р>Үіе1а: <зрап 1&етргор="у1е1А">4 зегуіпдѕ</зрап></р> 
<аіу ібетргор="пибгіііоп" ібетѕсоре 
іъетёуре= "Һер: / /аа+а-уосари1агу.огрд/Миёгібіоп"> 
Зегу1па зѕіле: <зрап ібетргор="ѕегуіпдЅіғ2е">1 1агде рок1</ѕрап> 
Са1огіез рег зегуіпд: <ѕрап іёетргор="са1огіеѕ">250</ѕрап> 
Еа рег ѕзегуіпд: <ѕрап іёетргор=" Ғаі">39</ѕрап> 
</аіу> 


ПРИМЕЧАНИЕ 


Свойства ргертіте и ргертіте представляют не конкретное время, а период времени, 
поэтому для них не используется тот же формат, что и для элемента НТМІ5 <ёіте>. 
Вместо этого применяется формат 150, информацию о котором можно найти по 
адресу Һір://еп.мікірейіа.огд/мікіЛ50 _8601#0игаііопѕ и Һр://ги.мікіредіа.огд/мікі/ 
150 8601. 


Потом следует список ингредиентов. Для каждого ингредиента создается отдель- 
ный вложенный блок, который обычно содержит такую информацию, как название 
и количество ингредиента: 


<и1> 

<11 ібепргор="іпдгейіепі" ібетѕсоре 
іъетёуре= "Һер: / /даёа-уосари1агу.огд/КесіреїІпдгейіепё"> 
<зрап іёетргор="атоцпё">1</ѕрап> 
<зрап іёетргор="пате">уе11от оп1оп</зрап> (дӢісеа) 

</11> 

<11 ібепргор="іпдгейіепі" 16етзсоре 
1%$етеуре="В р : / /даёа-уосари1агу.огд/КесіреїІпдгейіепё"> 
<зрап 1%епргор="атойпе">14-оппсе сап</зрап> 
<зрап іёетргор="пате">0ісеа Еомафоез</зрап> 

</11> 


</01> 


Выполнение этой части разметки требует значительных усилий, но пусть вас это не 
останавливает, т. к. награда за эти усилия уже близка. 


Наконец, инструкции по приготовлению в нескольких абзацах или списке шагов. 
Вставлены они в одно свойство: 


<аіу ібетргор="іпзёгисііопѕ"> 
<0о1> 
<1і>Ргеһеаё оуеп ёо 450 Чедгеез Е.</11> 
<11>5Ега1п Пе сһорреа саппеа ёотаёоеѕ, геѕегуіпа ёһе )и1сез.</11> 


</о1> 


</аіу> 
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Всю разметку этого рецепта можно просмотреть по адресу: 


Һќр://ѕоррогі.сооде.сот/уертаѕќегѕ/іп/апѕуег.ру?Ш=ги&апѕуег=173379 
(или һр://біпуог].сот/КісһЅпірреќ5Кесіре). 


ПРИМЕЧАНИЕ 


Рецепты обычно довольно длинные и содержат много подробностей, поэтому разме- 
чать — их долгая и сложная работа. Это очевидный случай, когда хорошее средство 
разработки могло бы облегчить работу. В идеале, это средство должно предоставить 
возможность вводить сведения рецепта в текстовые поля аккуратно упорядоченных 
окон, а потом генерировать семантически правильную разметку, которую можно будет 


вставить в страницу. 


После того как Соое занесет в индекс вашу размеченную страницу с рецептом, 
этот рецепт можно будет найти с помощью средства СооеІе для просмотра рецеп- 
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Рис. 3.9. После вывода результатов поиска рецепта Соодіе предоставляет возможность отфильтровать 
эти результаты на основе информации из расширенных фрагментов, которые он нашел в рецептах, 
отвечающих запросу. Например, можно указать вхождение или отсутствие определенных ингредиентов, 
максимальное время приготовления или количество калорий 


Глава 3. Разметка со смыслом 129 


тов. Для этого откройте в браузере страницу У\\.со0?е.сотЛап4т?/гестфез, вве- 
дите название рецепта (можно ввести и на русском языке) в поле поиска, а потом 
нажмите кнопку Ѕеагсһ (Поиск). Далее следует интересная часть. Так как боов/Іе 
может понимать структуру каждого рецепта, он в состоянии игнорировать страни- 
цы, не содержащие данных настоящих рецептов, а также позволяет указать допол- 
нительные критерии поиска (рис. 3.9). 


Из всего этого можно сделать окончательный вывод, что семантические данные 
предоставляют фанатам Интернета мощный инструмент для поиска информации и 
более эффективный способ поиска веб-страниц. 
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ГЛАВА 4 


Продвинутые веб-формы 


НТМГ-формы — это простые элементы управления НТМГ, которые применяются 
для сбора информации от посетителей веб-сайта. К ним относятся текстовые поля 
для ввода данных с клавиатуры, списки для выбора предопределенных данных, 
флажки для установки параметров и т. п. Существует бесчисленное количество 
способов использования НТМГ-форм, и если вы побродили по просторам Интерне- 
та всего лишь несколько дней, то, несомненно, использовали их для разных це- 
лей — от регистрации на каком-либо форуме или получения почтового ящика до 
просмотра биржевого курса или покупки товара в интернет-магазине. 


НТМЕ-формы существовали с самых ранних времен языка НТМІ, и с тех пор они 
нисколько не изменились, несмотря на определенные серьезные усилия. Разработ- 
чики веб-стандартов несколько лет колдовали над стандартом ХЕогтз, который 
должен был заменить НТМГ-формы, но его постиг такой же провал, как и стандарт 
ХНТМЕ 2 (см. разд. "ХНТМЕ 2: неожиданный провал" главы 1). Хотя стандарт 
ХЕогтѕ позволял легко и элегантно решать некоторые задачи, он также имел и зна- 
чительные недостатки. Например, код ХЕопп$ был очень объемистый, и для работы 
с ним нужно хорошее знание стандарта ХМГ. Но самое большое препятствие со- 
стояло в том, что стандарт ХЕогтѕ не был совместим с НТМГ-формами ни в каких 
отношениях. Это означало, что разработчикам нужно было бы бросаться в неизве- 
данные воды новой модели без вспомогательных плавсредств, а лишь со слепой 
верой и огромным мужеством. Но так как разработчики основных браузеров ни- 
когда не заморачивались с реализацией ХЕогтѕ в своих продуктах по причине его 
слишком большой сложности и небольшого использования, сообщество веб- 
разработчиков так никогда и не сделало этот прыжок. 


Стандарт НТМІ5 предлагает другой подход. Вместо того чтобы начинать с нуля, 
как в ХЕогтѕ, он совершенствует уже существующую модель НТМГ-форм. Это 
означает, что НТМЕ5-формы могут работать и на старых браузерах, лишь без но- 
вых примочек и наворотов. НТМІ5-формы также позволяют применять новые воз- 
можности, которые уже используются разработчиками в настоящее время. Эти 
возможности более доступны, не требуют написания страниц сценариев ЈауаЅстірі 
или применения инструментариев Јауа$сгірі сторонних разработчиков. 
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В этой главе мы рассмотрим все новые возможности НТМГ5-форм и увидим, какие 
из них поддерживаются, а какие — нет, а также взглянем на обходные решения, 
которые помогут справиться с возможными затруднениями. В завершение мы осу- 
дим возможность, которая хотя технически и не является частью стандарта форм 
НТМГ5, все-таки демонстрирует все новые интерактивные возможности — вне- 
дрение полнофункционального НТМГ-редактора в обычную веб-страницу. 


Что такое форма? 


Скорее всего, вам приходилось работать с формами раньше. Но если нет или если 
вы порядочно подзабыли эту тему, следующий материал позволит вам получить 
необходимые сведения для более углубленного изучения этой области веб-дизайна. 


Веб-форма — это набор текстовых полей, списков, кнопок и других активизируе- 
мых щелчком мыши элементов управления, посредством которых посетитель стра- 
ницы может предоставить ей тот или иной вид информации. Формы в Интернете 
повсюду — благодаря формам мы можем создавать учетные записи электронной 
почты, просматривать и покупать товары в интернет-магазинах, осуществлять фи- 
нансовые транзакции и многое другое. Самая простая форма — это одинокое тек- 
стовое поле поисковых систем, таких как Соое (рис. 4.1). 
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Рис. 4.1. Аскетическая страница системы поиска Соодіе содержит базисную НТМЕ-форму 
Все основные веб-формы работают одинаково. Пользователь вводит определенную 


информацию, а потом нажимает кнопку, чтобы отправить введенную информацию 
на веб-сервер. По прибытию на веб-сервер эта информация обрабатывается каким- 
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либо приложением, которое потом предпринимает соответствующий очередной 
шаг. Перед тем как отослать новую страницу назад браузеру, серверная программа 
может обратиться к базе данных, чтобы извлечь или сохранить информацию. 


Сложность этого процесса состоит в том, что существуют сотни разных способов 
реализации серверного приложения, которое обрабатывает поступившие из формы 
данные. Некоторым разработчикам может быть достаточно элементарных сценари- 
ев для манипулирования полученными данными, в то время как другие могут ис- 
пользовать средства высшего уровня, которые упаковывают данные из формы в 
аккуратные программные объекты. Но в любом случае, задача перед этими прило- 
жения стоит, по большому счету, одинаковая — исследовать данные из формы, вы- 
полнить какие-либо действия с ними, а потом на основе полученных результатов 
отправить браузеру новую страницу. 


ПРИМЕЧАНИЕ 


В этой книге не акцентируется внимание на используемой вами серверной программе. 
В действительности этот аспект не имеет особого значения, т. к. какую бы серверную 
программу вы не выбрали, вам все равно нужно будет использовать один и тот же на- 
бор элементов управления формы, на которые распространяются одинаковые прави- 
ла НТМІ5. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Отправка данных с помощью Јауа$сгірё 


Стоит заметить, что формы — не единственный способ для отправки введенных поль- 
зователем данных на сервер (хотя некогда они и были таковыми). Сегодня хитроум- 
ные веб-разработчики могут взаимодействовать с веб-сервером менее заметным об- 
разом, используя объект ХМЬНЕЕрВеацезь (см. разд. "Объект ХМІНірРедиеѕї" главы 11) 
в сценариях /ауа$спре. Например, этот подход применяется в странице поиска бооде 
двумя разными способами. Первый — для предоставления пользователю подсказок 
в раскрывающемся списке в строке ввода запроса, а второй — чтобы выводить ре- 
зультаты, и все это во время ввода пользователем текста своего запроса. (Но для это- 
го нужно включить возможность Соодіе Іпѕїапі в настройках поиска этой поисковой 
системы.) 


В связи с этим может возникнуть мысль, что отправку формы нажатием кнопки можно 
вообще заменить интерактивным обменом данными между формой и сервером, как 
это делается в Соодіе Іпѕќапїі. Хотя такой способ можно было бы предложить в виде 
опции, он неприемлем как единственный и обязательный, потому что подход с ис- 
пользованием Јауа$сгірі не совсем надежный. Например, при медленном подключе- 
нии с ним могут происходить периодические сбои. Кроме этого, все еще есть пользо- 
ватели, пусть даже и немногочисленные, чьи браузеры не поддерживают Јама$сгірі 
или в которых эта поддержка отключена. 


Наконец, стоит отметить, что вполне допустимо иметь формы, которые никогда не от- 
правляют свои данные. Вам, наверное, встречались формы, выполняющие простые 
вычисления. Для этих форм не нужна никакая помощь со стороны сервера, т. к. они 
выполняют вычисления и выводят результат на текущей странице посредством сце- 
нариев ЗауаЗспру, код которых включен в разметку страницы. 


С точки зрения НТМІ5, что происходит с данными — отправляются ли они для обра- 
ботки на сервер через кнопку отправки, обрабатываются ли они локально посредством 
сценариев Јауа$сгірї или же передаются на сервер через объект хмЬНЕЕрвеаиезе — 
не имеет существенного значения. Во всех случаях форма для них создается на базе 
элементов управления НТМЕ-форм. 
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Модернизация традиционной НТМЕ-формы 


Лучший способ обучения работе с формами НТМЕ5 — это взять типичную совре- 
менную форму и усовершенствовать ее. На рис. 4.2 показана форма, на примере 
которой мы будем обучаться. 


Разметка такой формы до предела проста. Если вам раньше приходилось работать 
С формами, вы не увидите здесь ничего нового. Прежде всего, весь код формы за- 
ключается в элемент <Ғогт>: 


<Ғогт 149="гооКеерегГоги" асііоп="ргосеззАрр1ісаііоп.сді"> 


<р><1>Р1еазе сотрІеїе іһе Ғогт. Мапдаёогу Ғіе14ѕ аге тагкеа 
м1ЕВ а </і><ет>*</еп></р> 


= САНТМЕ$\ Свареег 04\ГооКеереРогт_Оподта!. Вт о- бх |1) 5. 59 ) 


ё ттт Рогт | | 


200 Кеерег АррПсаНоп Еогт 


Р1еаѕе сотріеіе ће ютт. Мапааюту пез ате таткей її а * 
СОМТАСТ ОЕТАП 5 


Мате * 
ТеІерһопе 


Ета! * 


РЕКЅОМАІ ІМЕОКМАТІОМ 


*Аре 


Сепаег Ретае ь4 


Мел аі уои 
Нгѕї Кпоу уои 
утаг{е4 іо бе а 


гоо-Кеерег? 


РІСК ҮОСК ЕАУОКПЕ АМІМАІЅ 


0 Иефга 7 Саё С Апласоп4а 7 Назтап 


1 ЕІерћапі О М1аебееѕі С Ріреоп Я Сгаь 


Зибтй Арріісаћоп 


100% ~ 


Рис. 4.2. Если вы хоть немного побродили по пространствам Интернета, вам, несомненно, 
встречалось много форм, подобных этой форме заявления о приеме на работу служителем зоопарка, 
которые собирают ту или иную информацию от посетителя страницы 
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Элемент <ғогт> удерживает вместе все элементы управления формы, которые так- 
же называются полями. Кроме этого, он также указывает браузеру, куда отправить 
данные после нажатия пользователем кнопки отправки, предоставляя ОВГ в атри- 
буте асЕ1оп. Но если вся работа будет выполняться на стороне клиента сценариям 
Тауабспрь, то для атрибута асе1ор можно просто указать значение #. 


ПРИМЕЧАНИЕ 


В НТМЕ5 добавлен механизм для размещения элементов управления формы вне са- 
мой формы. Трюк состоит в использовании нового атрибута Ғогт для обращения 
к форме по ее идентификатору (например, Еохи="тооГоги"). Но браузеры, не под- 
держивающие эту возможность, совсем не заметят данные такой формы, что делает 
эту незначительную возможность слишком рискованной для применения в настоящей 
веб-странице. 


Хорошо спроектированная форма, наподобие формы на рис. 4.2, разделяется на ло- 
гические фрагменты с помощью элемента <#іе1дѕеё>. Каждому разделу можно 
присвоить название, для чего используется элемент <1есепа>. В следующем листин- 
ге приводится разметка раздела формы Сопќасі Юеѓа11ѕ (внешний вид и описание 
которого показано на рис. 4.3): 


<Ғіе1аѕеі> 
<1едепа>сСопёасё реёбаі15</1едепах> 
<1абе1 Ғог="пате">Мате <еп>*</ет></1аре1> 
<1приЕ іа="паме"><рг> 
<1аре1 Ғог="ёе1ерһопе">Те1ерһопе</1аре1> 
<іпроі іа="бе1ерһопе"><рг> 
<1аре1 Еог="ета11">Ета11 <еп>*</ет></1аре1> 
<1праЕ іа="етаі1"><рг> 

</ Ғіе1аѕеї> 


<едепа> <ћеІаѕеїі 


СОМТАСТ ОЕТАП 5 


<Іареі> <іпри 


Рис. 4.3. Данный раздел <ғіе1аѕе+> собирает три единицы информации: имя, номер телефона 
и адрес электронной почты. Для каждой единицы информации используются два элемента: 
элемент <1аре1> для обозначения поля ввода данных и элемент <іприі»>, <+ехёагеа> 
или <зе1есЕ> собственно для поля ввода 
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Как и во всех формах, большая часть работы в нашем примере выполняется уни- 
версальным элементом <іприё>, который собирает данные и создает флажки, пере- 
ключатели и списки. Для ввода одной строки текста применяется элемент <іпри+>, 
а для нескольких — элемент <кехеагеа>; элемент <ѕе1есі> создает выпадающий 
список. Краткое обозрение этих и других элементов управления форм приведено 
в табл. 4.1. 


Таблица 4.1. Элементы управления формы 


Элемент 
управления 


НТМЕ-элемент Описание 


Однострочное <1прае ёуре="ёехі"> Выводит однострочное текстовое поле 
для ввода текста. Если для атрибута 
Суре указано значение раз 5мога, вво- 
димые пользователем символы ото- 
бражаются в виде звездочек (*) или 
маркеров-точек (*) 


текстовое поле <іпроё суре="раззмога"> 


Многострочное <сехіагеа>...</бехіагеа> Текстовое поле, в которое можно вве- 
текстовое поле сти несколько строчек текста 


Флажок <іприё ёуре="сһескрох"> Выводит поле флажка, который можно 
установить или очистить 


Переключатель <іпроё ёуре="гайіо"> Выводит переключатель — элемент 
управления в виде небольшого кружка, 
который можно включить или выклю- 
чить. Обычно создается группа пере- 
ключателей с одинаковым значением 
атрибута пате, вследствие чего можно 
выбрать только один из них 


Кнопка <іпроё ёуре="зицртіё"> Выводит стандартную кнопку, активи- 
зируемую щелчком мыши. Кнопка типа 
ѕооті+ всегда собирает информацию с 
формы и отправляет ее для обработки. 
<1прие ёуре="риобёоп"> Кнопка типа ітасе делает то же самое 
но позволяет вместо текста на кнопке 
вставить изображение. Кнопка типа 
геѕеї очищает поля формы от введен- 
ных пользователем данных. А кнопка 
типа роёёоп сама по себе не делает 
ничего. Чтобы ее нажатие выполняло 
какое-либо действие, для нее нужно 
добавить сценарий Јауа$сгірі 


<1прие Еуре="1таде"> 


<1прае ёуре="геѕеі"> 


Список <ѕе1есі>... </зе1ес®> Выводит список, из которого пользова- 
тель может выбирать значения. Для 
каждого значения списка добавляется 
элемент <орЕ1оп> 


В следующем листинге приводится оставшаяся часть разметки примера, включаю- 
щая список <зе1есЪ>, флажки и кнопку для отправки данных: 
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<Ғіе1аѕеі> 
<1едепа>Регзопаї ІпҒогтаііоп</1едепа> 
<1аре1 Ғог="аде"><ет>*</еп>Аде</1аре1> 
<іпроё іа = "аде"><рг> 
<1аре1 Ғог="депдег">бепіег</1аре1> 
<зе1есЕ іа="депадег"> 


<орііоп уа1ае=" Ғемаї1е">Еепаіе</орііоп> 
<орііоп уа1џе="паіе">Ма1е</орііоп> 


</ѕе1есір><рг> 
<1аре1 Ғог="сотпепёѕ">Иһеп аіа уои Ғігѕі Кпом уои мапееа 


{о ре а 200о-Кеерег?</1аре1> 


<бёехёагеа іа="сотпепёѕз"></бехіагеа> 


</ Ғіе1аѕеї> 
<Ғіе1аѕеі> 
<1едепа>ріск Уойг Ғауогіёе Апіта15</1едепа> 
<1аре1 Ғог="2ерга"><іпроиё іа="2ерга" іуре="сһескрох">7ерга</1аре1> 
<1абе1 Ғог="саё"><іпроё ід="саё" іуре="сһескрох">Саї</1аре1> 
<1аре1 Ғог="апасопаа"><іприі іа="апасопаа" ёуре="сһескрох"> 
Апасопаа </1аре1> 
<1аре1 Еог="Бамап"><1прие іа="Һитап" буре="сһескрох">Нотап</1аре1> 
<1аре1 Ғог="е1ерһапі"><іприё іа="е1ерһапі" ёуре="сһескрох"> 
Е1ерһапё </1аре1> 
<1аре1 Ғог="мі1дерееѕё"><іприі іа="кі1дерееѕі" ёуре="сһескрох"> 
і1аереезі</1аре1> 
<1абе1 Ғог="рідеоп"><іприоё іа="рісдеоп" буре="сһескрох">Рідеоп</1аре1> 
<1аре1 Ғог="сгар"><іприё іа="сгар" ёбуре=" сһескрох">Сгар</1аре1> 
</ Ғіе1аѕеї> 


<р><іпроё ёуре=" зиртіё" уа1џе="Ѕирті Арр1ісаёіоп"></р> 
</ Ёогт> 


Полностью разметку этого примера формы, а также относительно простую таблицу 
стилей для нее, можно загрузить с сайта книги (ууүү.ргоѕеќесһ.сот/һті5). Файл 
ГоокКерег-Еопп_Опета1.Вт! содержит традиционную версию формы, а файл 
ГооКерегЕогт_Веу15е4.5 1 — версию НТМГ5. 


ПРИМЕЧАНИЕ 


Одним из ограничений НТМЕ-форм является то, что разработчик не может контроли- 
ровать, каким способом браузер отображает элементы управления формы. Например, 
если вы хотите заменить унылое серое поле флажка большим черно-белым полем 
с жирной красной галочкой, вам этого не удастся. (Одно из решений этой проблемы — 
создать с помощью УауаЗсйр! элемент с поведением, подобным флажку, иными сло- 
вами, элемент меняет свой внешний вид, когда на нем щелкают.) 


Это ограничение сохранилось и в НТМІ5 и распространяется на все новые элементы 
управления, которые мы рассмотрим в этой главе. Это означает, что формы не по- 
дойдут для разработчиков, которым нужен полный контроль над внешним видом своих 
страниц в общем и требуются элементы управления с особым внешним видом в част- 
ности. 
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Теперь, когда у нас есть форма, с которой можно работать, настало время улучшить 
ее с помощью НТМГ5. Начнем мы это в следующих разделах с добавления подста- 
новочного текста подсказок и поля с автоматическим фокусом. 


Добавление подсказок 


Обычно поля новой формы не содержат никаких данных. Для некоторых пользова- 
телей такая форма может быть не совсем понятной, в частности, какую именно ин- 
формацию нужно вводить в конкретное поле. Поэтому часто поля формы содержат 
пример данных, которые нужно ввести в них. Этот подстановочный текст также 
называется "водяным знаком", так он часто отображается шрифтом светло-серого 
цвета, чтобы отличить его от настоящего, введенного содержимого. Пример такого 
подстановочного текста показан на рис. 4.4. 


СомтАСТ ПЕТАП$ 


Мате * 


Таервопе 


Етай * 


Рис. 4.4. Вверху: когда поле пустое, в нем отображается подстановочный текст, как в случае с полями 
Мате и Теерпопе. Внизу: когда пользователь щелкает мышью в поле (устанавливая в нем фокус), 
подстановочный текст исчезает. Если пользователь переходит в другое поле, не введя ничего в первое, 
то поле снова заполняется подстановочным текстом 


Подстановочный текст для поля создается с помощью атрибута рІасеһо1аег: 


<1аре1 Ғог="пате">Мате <ет>*</ет></1аре1> 

<1приЕ 14="паще" рІасеһо1йег="Јапе ЅтіЁҺ"><рг> 

<1аре1 Ғог="+е1ерһопе">Те1ерһопе</1аре1> 

<1приЕ іа="ёе1ерһопе" рІасеһо1йег=" (ххх) ххх-хххх"><рг> 


Браузеры, не поддерживающие подстановочный текст, просто не обращают внима- 
ния на атрибут р1асећо1дег; особенно грешит этим Пиегпе( Ехр|огег. К счастью, это 
не такая уж и большая проблема, т. к. подстановочный текст — всего лишь прият- 
ная примочка, не обязательная для функционирования формы. Но если такая 
ситуация лишает вас сна, по адресу ћќёр://ёпуишг1.сот/роіућіїѕ можно найти уйму 
Јауа$сгірі-сценариев, которые без проблем наставят ІЕ на путь истинный. 
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В настоящее время не существует стандартного, единообразного способа изменить 
внешний вид подстановочного текста, например, выделить его курсивом или 
шрифтом определенного цвета. Со временем разработчики браузеров создадут тре- 
буемые для этого обработчики. Но пока либо нужно применять специфические для 
браузера псевдоклассы (а именно -керкі+-іприё-ріасеһо1дег И -по2-р1асеһо1йег), 
либо смириться с таким порядком вещей. (Псевдоклассы рассматриваются 
в разд. "Селекторы псевдоклассов" приложения 1.) 


А вот псевдокласс Еосиз обеспечивается лучшей поддержкой, и его можно исполь- 
зовать, чтобы изменять внешний вид текстового поля при получении фокуса. На- 
пример, сделать фон поля более темным, чтобы оно выделялось среди остальных, 
можно следующим образом: 


іприіё:Ёосиѕ { 
раскагоџпа: #еаеаеа; 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Создание качественного подстановочного текста 


Подстановочный текст не обязательно требуется для каждого текстового поля, а толь- 
ко для таких, где пользователь может испытать затруднения с пониманием типа или 
формата данных. Например, для поля, обозначенного "Полное имя", вряд ли нужны 
какие-либо объяснения, но вот что нужно вводить в поле с надписью просто "Имя", как 
в поле Мате на рис. 4.4, не столь очевидно. А подстановочный текст ясно показывает, 
что нужно вводить не только имя, но и фамилию. 


Иногда подстановочный текст является возможным значением ввода. Например, в ка- 
честве подстановочного текста поля запроса на странице поиска рецептов Соодіе 
(ћНр://^у\муму.доодіе.сот/апаіпд/гесіреѕ) употребляется текст "сһіскеп раза", ясно да- 
вая знать, что нужно ввести часть названия рецепта, а, скажем, не название ингреди- 
ента или имя повара, придумавшего его. 


В других случаях подстановочный текст указывает способ форматирования вводимого 
значения. Так, подстановочный текст в поле Теіерћопе на рис. 4.4 — (ххх) ххх-хххх — 
дает понять, что номер телефона должен состоять из трехзначного междугородного 
кода и трехзначной, а потом четырехзначной последовательностей цифр собственно 
номера. Этот подстановочный текст не обязательно означает, что нельзя использо- 
вать другой формат, но дает подсказку об одном из возможных форматов. 


Но подсказка подсказке рознь, и не следует перебирать через край с подстановочным 
текстом. Прежде всего, не пытайтесь втиснуть в поле его описание или инструкции. 
Возьмем, например, поле для ввода кода безопасности кредитной карточки. Многие 
люди не знают, что это такое. Но объяснение "Три цифры справа от поля подписи на 
обратной стороне карточки" будет не очень хорошим подстановочным текстом. 
Вместо этого следует рассмотреть другое место для размещения подсказки, напри- 
мер, добавить примечание под полем ввода. Также можно использовать атрибут 
сіє1е, чтобы выводить всплывающую подсказку при наведении курсора мыши на по- 
ле, как показано в следующем коде: 


<1аре1 Ғог="ргопоСойе">Ргопобіоп Соде</1аре1> 

<1приЕ іа="ргопоСоде" рІасеһо1дег="ОКВ001" 
+ъіб1е="Үоџг ргопоііоп сое іѕ ЕВгее Іеібегѕ 
Ғо11омеа Бу +Һгее пипрегѕ"> 
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Также не используйте специальные символы в подстановочном тексте с целью пока- 
зать, что это не настоящее значение данного поля. Например, на некоторых веб- 
сайтах в качестве подстановочного текста для имени используют [Иван Сидоров] 
вместо Иван Сидоров, где квадратные скобки должны, по идее, указывать на то, что 
это только пример. Но пользователи, скорее всего, не поймут этого, и будут вводить 
свое имя вместе со скобками. 


Фокус: правильное начало 


Так как форма предназначена для ввода информации, первым делом после ее за- 
грузки пользователи захотят вводить эту информацию. К сожалению, делать этого 
они не смогут до тех пор, пока не щелкнут мышью по первому полю или выделят 
его с помощью клавиши <Таб>, установив, таким образом, фокус на этом поле. 


Пользователю можно помочь в этом, установив фокус на нужном начальном поле 
автоматически. Это можно сделать с помощью ЈауаЅстірі, вызывая метод Еослз () 
требуемого элемента <іпро+>. Но этот подход требует лишней строки кода и иногда 
может вызывать раздражающие неувязки. Например, особо проворные пользовате- 
ли могут опередить вызов метода ғосиѕ (), щелкнуть в каком-либо другом поле и 
начать вводить в нем, а когда метод, наконец, вызовется, пользователь грубо вы- 
двинется из выбранного им поля и переместится в поле, выбранное методом. Но 
если управлять фокусом может браузер, он может быть несколько более смышле- 
ным и перемещать фокус только в том случае, если пользователь еще не выбрал 
другое поле. 


На этой идее основан новый НТМІ5-атрибут аџсоғосиѕ, который можно вставить 
в элемент <іприё> ИЛИ <бехбагеа> (но только в один элемент формы), как показано 
в следующем примере: 

<1аре1 Еог="раце">Маме<еп>*</ет></1абе1> 

<1приЕ 14="паще" р1асеро14ет="Рапе Ѕтіһ" ачбоосиз><фг> 


Уровень поддержки браузерами атрибута азкогосиз примерно такой же, как и атри- 
бута р1асеһо1дег, и означает, что практически все браузеры поддерживают его, за 
исключением Іпѓегпеѓ Ехр]огег. Но опять же, эта проблема легко решается. Прове- 
рить поддержку атрибута аџёоғосиѕ конкретным браузером можно с помощью ин- 
струмента Модегилтг (см. разд. "Определение возможностей с помощью Модегити" 
главы 1) и, если необходимо, запускать собственный код для автоматического фо- 
куса. Можно также использовать готовый Јауа$Ѕсгірі-заполнитель для поддержки 
автоматического фокуса (ћќќр://іпуигі.сот/роіуё115). Но вряд ли стоит прилагать 
эти усилия ради такой незначительной примочки, если только вы не планируете 
заодно обеспечить поддержку в ГЕ других возможностей форм, наподобие системы 
проверки данных, рассматриваемой в следующем разделе. 


Проверка: ошибкам — нет! 


Поля в форме предназначены для сбора информации от посетителей страницы. Но 
несмотря на все усилия и объяснения, получение правильной информации может 
оказаться трудным делом. Нетерпеливые или невнимательные посетители могут 


Глава 4. Продвинутые веб-формы 143 


пропускать важные поля, заполнять поле или несколько полей не полностью, да и 
попросту нажимать неправильные клавиши. Заполнив таким образом форму, они 
нажимают кнопку Отправить, и серверная программа получает набор данных, 
с которыми она не знает, что делать. 


Серьезной веб-странице требуется проверка данных, т. е. какой-либо способ обна- 
ружения ошибок во введенных данных, а еще лучше — способ, не допускающий 
ошибок вообще. На протяжении многих лет веб-разработчики делали это с по- 
мощью процедур ЈауаЅсгірі собственной разработки или посредством профессио- 
нальных библиотек ЛауаЗспре. И говоря по правде, эти подходы давали отличные 
результаты. Но, видя, что проверка выполняется повсеместно (практически всем 
нужно проверять вводимые данные на ошибки) и применяется лишь к нескольким 
основным типам данных (например, адресам электронной почты или датам), а так- 
же, что ее реализация — такая неинтересная и скучная задача (никому, по сути, не 
хочется писать один и тот же код для каждой формы, не говоря уже о тестировании 
его), определенно должен быть лучший способ для ее реализации. 


Создатели НТМГ5 смогли увидеть эту надобность и изобрели способ привлечь 
браузеры на помощь, переложив задачу проверки с плеч веб-разработчиков на веб- 
обозреватели. Создатели НТМТ.5 разработали систему проверки на стороне клиен- 
та (см. врезку. "На профессиональном уровне. Двусторонняя проверка" далее 
в этой главе), которая позволяет вставлять основные правила валидации в любое 
поле <іпро+>. Лучшее в этой системе — это ее простота и легкость: все, что нужно 
делать, — так это вставить правильный атрибут. 


Как работает проверка НТМЕ5? 


Основная идея в основе проверки форм НТМІ5 состоит в том, что разработчик 
указывает данные для валидации, но не реализует все необходимые для этого тру- 
доемкие подробности. Это что-то похожее на начальника, который только отдает 
приказания, но реализует эти указания не сам, а с помощью подчиненных. 


Например, допустим, что определенное поле нельзя оставлять пустым, и посети- 
тель должен ввести в него хоть что-то. В НТМІ5 это осуществляется с помощью 
атрибута геао1геа В соответствующем поле: 


<1аре1 Ғог="пате">Мате <еп>*</ет></1аБе1> 
<1приЕ 14="паще" рІасеһо1дег="Јапе Ѕтіёһ" аџіоЁосиѕ геаџігеа><рг> 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Двусторонняя проверка 


На протяжении нескольких лет изобретательные веб-разработчики подходили к реше- 
нию задачи проверки с разных сторон, но на сегодняшний день достигнуто общее 
мнение. Чтобы полностью исключить возможность ввода в форму неправильных дан- 
ных, требуются два вида проверки на ошибки. 


• Проверка на стороне клиента. Эта проверка выполняется браузером до отправки 
формы на сервер. Ею цель — облегчить пользователю заполнение полей формы. 
Вместо того чтобы дать ему заполнить три с половиной десятка полей, отправить 
форму для обработки, получить ответ от сервера о некорректности данных и пред- 
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ложить заполнить форму снова, ошибки ввода следует улавливать в процессе их 
возникновения. Таким образом, можно сразу же вывести полезное сообщение об 
ошибке в соответствующем месте, позволив пользователю исправить ее, прежде 
чем отправлять форму на сервер. 


• Проверка на стороне сервера. Эти проверки формы выполняются после ее от- 
правки на сервер на стороне сервера. На данном этапе серверное приложение 
проверяет полученные данные, чтобы удостовериться в их соответствии требова- 
ниям, прежде чем приступать к их дальнейшей обработке. Независимо от проверки 
на стороне браузера, проверка на стороне сервера является обязательной. Это 
единственный способ обезопасить себя от злоумышленников, которые намеренно 
пытаются предоставить неправильные данные. Если серверная программа про- 
верки обнаружит проблему с данными, она отправит в браузер страницу с сообще- 
нием об ошибке. 


Таким образом, проверка на стороне клиента (примером которой является проверка 
с помощью НТМІ5) предназначена для облегчения заполнения формы посетителями 
веб-страницы, а проверка на стороне сервера призвана обеспечить правильность 
введенных данных. Ключевой момент, который нужно понимать, — это обязательное 
выполнение проверки обоих типов, если только речь не идет о чрезвычайно простой 
форме, допущение ошибок на которой маловероятно или корректность данных не иг- 
рает большой роли. 


Даже с применением для поля атрибута геаџігеа на это требование нет никаких 
визуальных указателей по умолчанию. Поэтому следует обратить внимание поль- 
зователя на это требование с помощью каких-либо своих визуальных признаков, 
например, выделив рамку поля цветом и поставив возле него звездочку (как на 
рис. 4.2). 


Проверка выполняется, когда пользователь нажмет кнопку для отправки формы. 
Если браузер поддерживает формы НТМГ5, он заметит пустое обязательное для 
заполнения поле, перехватит вызов отправки формы и отобразит всплывающее со- 
общение об ошибке (рис. 4.5). 


Как мы увидим в последующих разделах, с помощью других атрибутов МОЖНО ВЫ- 
полнять проверку на ошибки ввода других типов. К одному полю можно применять 
несколько правил, а одно и то же правило — к скольким угодно элементам <іприё>, 
как и к элементу <Еехсагеа>. Прежде чем браузер даст разрешение на отправку вве- 
денных данных, все требования валидации должны быть удовлетворены. 


В связи с этим возникает вопрос: что будет, если нарушено несколько правил про- 
верки, например, не заполнено несколько обязательных полей? 


Опять же, ничего не будет, пока пользователь не нажмет кнопку для отправки фор- 
мы. Только после этого браузер начнет проверять поля сверху вниз. Встретив пер- 
вое некорректное значение, он прекращает дальнейшую проверку, отменяет от- 
правку формы и выводит сообщение об ошибке рядом с полем, вызвавшим эту 
ошибку. (Кроме этого, если при заполнении формы область с полем ошибки вышла 
за пределы экрана, браузер прокручивает экран, чтобы это поле находилось вверху 
страницы.) После того как пользователь исправит данную ошибку и опять нажмет 
кнопку для отправки формы, браузер остановится на следующей ошибке ввода, и 
процесс повторится. 
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— СОМТАСТ ОЕТАП 5 


Теіерһопе 
Ріеаѕе НИ ош +һіѕ беа. 


Етай * 


г- СОМТАСТ ОЕТАП$ 


Таервопе РІеаѕе #11 оц һіѕ Пе!9. 


Г Сомтадст ОЕТАП$ 


Мате * | ЕЕ 
Таеке [бою ТН: їз а гедиігей йе! | 
Е1лай * 


Рис. 4.5. Сообщение о пустом обязательном для заполнения поле в браузерах Еігеїох (вверху), 
Сһготе (в центре) и Орега (внизу). Хотя официальных требований к оформлению сообщения 
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об ошибках при проверке не существует, во всех браузерах для этой цели применяются всплывающие 
подсказки. К сожалению, веб-разработчики не могут изменять оформление или текст этого сообщения, 


по крайней мере не в настоящее время 


ПРИМЕЧАНИЕ 


Браузеры выполняют проверку введенных пользователем данных только после того, 
как тот нажмет кнопку для их отправки. Таким образом обеспечивается эффектив- 
ность и умеренность системы проверки, чтобы она работала для всех. 


Некоторым веб-разработчикам хотелось бы предупреждать пользователя об ошибке 
сразу же после выхода из неправильно заполненного поля (когда он нажмет клавишу 
<Тар> или щелкнет мышью в другом поле). Такой подход к проверке полезен для 
длинных форм, особенно если возможно, что пользователь сделает одну и ту же 
ошибку в нескольких полях. К сожалению, НТМІ5 не предоставляет разработчикам 


средства указывать браузеру, когда ему выполнять проверку, хотя она может быть 
добавлена в будущем. Тем временем, возможность немедленного оповещения об 
ошибках ввода лучше всего реализовать с помощью своего Јама$сгірё-сценария или 


же воспользоваться хорошей библиотекой Јаха$сгірі. 


Отключение проверки 


В некоторых случаях может потребоваться отключить проверку. Например, вы хо- 
тите протестировать свой серверный код на правильность обработки поступивших 
некорректных данных. Чтобы отключить проверку для всей формы, в элемент 


<Ғогт> добавляется атрибут поуа1ійаёбе: 


<Ғогт іа="2ооКеерегЕогп" асііоп="ргосеѕзАрр1ісаіёіоп.ссді" поуа1ійаёе> 
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Другой подход — это отключить проверку в кнопке для отправки формы. Такой 
способ иногда полезен в настоящей веб-странице. Например, вместо отправки, мо- 
жет быть, требуется сохранить наполовину заполненную форму для дальнейшего 
использования. Чтобы получить такую возможность, в элемент <1прие> соответст- 
вующей кнопки вставляется атрибут ғогппоуа1ідаёбе: 


<1праЕ вуре="зирт1е" уа1ае="бауе Рог Іаіег" Ғогтпоуа1ійаіе> 


Обнаружение незаполненных полей — это только один из нескольких типов про- 
верки. Далее мы рассмотрим обнаружение ошибок в данных разных типов. 


ПРИМЕЧАНИЕ 


Планируете выполнять проверку чисел? В настоящее время не существует правила 
проверки наличия цифр в тексте, но есть новый тип данных пимоег, который мы рас- 
смотрим в разд. "Числа" далее в этой главе. К сожалению, поддержка этого типа дан- 
ных все еще поверхностная. 


Оформление результатов проверки 


Хотя веб-разработчики не могут оформлять сообщения об ошибках проверки, они 
могут изменять внешний вид полей в зависимости от результатов их валидации. 
Например, можно выделить поле с неправильным значением цветным фоном сразу 
же, когда браузер обнаружит неправильные данные. 


Все, что для этого требуется, — это добавить несколько простых псевдоклассов 
(см. разд. "Селекторы псевдоклассов" приложения 1). Доступны следующие опции: 


О геча1геЯ И орЕ1опа1, которые применяют форматирование к полю в зависимости 
от того, использует ли это поле атрибут геаа1геа или нет; 


О уаіаи 1пуа11а, которые применяют форматирование к полю в зависимости от 
правильности введенного в него значения. Но не забывайте, что большинство 
браузеров не проверяет данные, пока пользователь не попытается отправить 
форму, поэтому форматирование полей с некорректными значениями не выпол- 
няется сразу же при введении такого значения; 


П іһ-гапде И оџі-оғ-гапде, применяющие форматирование к полям, для которых 
используется атрибут піп или пах, чтобы ограничить их значение определенным 
диапазоном значений (см. разд. "Числа" далее в этой главе). 


Например, сделать желтым фон полей <іприє>, обязательных для заполнения, мож- 
но с помощью правила С$$ с псевдоклассом геаџігеа: 
іприоё:геаџігеа { 
Баскагоипа-со1ох: 1ідћіёуе11ом; 
} 


А сделать желтым фон только тех полей, которые являются обязательными и в на- 
стоящее время содержат некорректные значения, можно с помощью комбинации 
псевдоклассов геаа1теа И 1пуа11а таким образом: 
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іприё:геаџігеа:іпуа1іа { 
Баскагоипа-со1ох: 1ідћһіёуе11ом; 


При такой настройке незаполненные поля автоматически выделяются желтым цве- 
том, т. к. они нарушают правило геаџоігеа для поля. 


Можно применять всяческие другие приемы, например, использование псевдоклас- 
сов для проверки совместно с псевдоклассом ғҒосиѕ или пометку некорректных зна- 
чений посредством смещенного фона со значком ошибки. Но в то время как псев- 
доклассы могут улучшить внешний ВИД веб-страниц, использовать их следует с не- 
которой мерой предосторожности. В частности, надо удостовериться, что страница 
выглядит должным образом без форматирования псевдоклассами, т. к. уровень их 
поддержки некоторыми браузерами оставляет желать лучшего. 


Проверка с помощью регулярных выражений 


Самым мощным (и самым сложным) поддерживаемым НТМГ.5 типом проверки 
является проверка на основе регулярных выражений. Поскольку ЈауаЅстірі уже 
поддерживает регулярные выражения, добавление этой возможности к формам 
НТМЕ будет вполне логичным шагом. 


Регулярное выражение — это шаблон для сопоставления с образцом, закодирован- 
ный согласно определенным синтаксическим правилам. Регулярные выражения 
применяются для поиска в тексте строк, которые отвечают определенному шабло- 
ну. Например, с помощью регулярного выражения можно проверить, что почтовый 
индекс содержит правильное число цифр, или в адресе электронной почты присут- 
ствует знак е, а его доменное расширение содержит, по крайней мере, два символа. 
Возьмем, например, следующее выражение: 


[А-7] {3}- [0-9] {3} 


Квадратные скобки в начале строки определяют диапазон допустимых символов. 
Иными словами, группа [А-2] разрешает любые прописные буквы от А до 7. Сле- 
дующая за ней часть в фигурных скобках указывает множитель, т. е. {3} означает, 
что нужны три прописные буквы. Следующее тире не имеет никакого специально- 
го значения и означает самое себя, т. е. указывает, что после трех прописных букв 
должно быть тире. Наконец, [0-91 обозначает цифры в диапазоне от 0 до 9, а {3} 
требует три таких цифры. 


Регулярные выражения полезны для поиска — нахождения в тексте строк, отве- 
чающих условиям, заданных в выражении, и проверки, что определенная строка 
отвечает заданному регулярным выражением шаблону. В формах НТМІ5 регуляр- 
ные выражения применяются для валидации. 


ПРИМЕЧАНИЕ 


Внимание: для обозначения начала и конца значения в поле символы ^ и $, соответ- 
ственно, не требуются. НТМЕ5 автоматически предполагает наличие этих двух симво- 
лов. Это означает, что значение в поле должно полностью совпасть с регулярным 
выражением, чтобы его можно было считать корректным. 
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Таким образом, следующие значения будут допустимыми для регулярного выраже- 
ния [А-7] {3}-[0-9] {3}, рассмотренного ранее: 


ОВВ-001 
ТТТ-952 
ТАА-000 


А вот эти нет: 


ать-001 
ТТТ-0952 
ТА5-000 


Но регулярные выражения очень быстро становятся более сложными, чем рассмот- 
ренный нами пример. Поэтому создание правильного регулярного выражения мо- 
жет быть ДОВОЛЬНО трудоемкой задачей, что объясняет, почему большинство разра- 
ботчиков предпочитает использовать для проверки данных на своих страницах уже 
готовые регулярные выражения. Или же они обращаются за профессиональной 
ПОМОЩЬЮ. 


СОВЕТ 

Получить достаточно информации о регулярных выражениях для создания сверхпро- 
стых выражений можно с помощью кратких руководств по адресу ммм м3$споо!$.сот/ 
]5/]$_об] гедехр.аѕр или ћҺр://іпуий.сот/јѕгедех. Готовые регулярные выражения 
для своих форм можно найти на сайте ћр://гедехіір.сот. А чтобы стать настоящим 
ДОКОЙ В регулярных выражениях, прочитайте книгу Джеффри Фридла "Регулярные вы- 
ражения" . 


Чтобы применить полученное тем или иным путем регулярное выражение для про- 
верки значения поля <іприї> или <кехфагеа>, его следует добавить в этот элемент 
в качестве значения атрибута раееегп: 


<1аре1 Ғог="ргопоСойе">Ргопобіоп Соде</1аре1> 
<1праЕ іа="рготоСоде" рІасеһо1аег="ОКВ-001" Е1Е1е= 


"ҮУоџг рготобіоп соае із Ее иррегсазе Іеіёегѕ, а ааѕпһ, 
фВеп ©һгее пипбет5" 


раібегп=" [А-7] {3}-[0-9]{3}"> 
На рис. 4.6 показана реакция браузера, если введенное значение не проходит про- 
верку. 


СовеТ 


Браузеры не поддерживают проверку пустых значений. В примере на рис. 4.6 пустое 
значение пройдет проверку. Если вам нужно нечто иное, можно вдобавок к атрибуту 
раесегп использовать атрибут геаџігеа. 


ПРИМЕЧАНИЕ 


Регулярные выражения кажутся идеальным средством для проверки правильности 
адресов электронной почты. Впрочем, не кажутся, а так оно и есть. Но подождите не- 


' Фридл Дж. Регулярные выражения. — СПб.: Символ-Плюс, 2008. 
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много с использованием их таким образом, т. к. в НТМЕ5 уже имеется выделенный тип 
для адресов электронной почты со встроенным в него регулярным выражением 
(см. разд. "Адреса электронной почты" далее в этой главе). 


РгоглоНоп Сойе 


РІеаѕе таќсһ {һе 
гедиеѕѓеа ѓогтаї. 


Үоиг рготойоп соае іѕ іћгее 
Іейегѕ, а дазп, іһеп іһгее 
питрегѕ 


Рис. 4.6. Умные браузеры (такие, как Сһготе, использованный для этого примера) 
не только улавливают ошибку, но также выводят в сообщении об ошибке текст атрибута Е1ЕТе, 
чтобы помочь пользователю, заполняющему форму 


Специализированная проверка 


Спецификация НТМІ5 также оговаривает набор свойств ЈауаЅсгірі, с помощью ко- 
торых можно определить корректность значений полей (или заставить браузер вы- 
полнить проверку). Наиболее полезным из них является метод ѕеСиѕіотуа1іаі+у (), 
с использованием которого можно написать специальный сценарий для проверки 
конкретных полей, который будет работать с системой валидации НТМГ5. 


Осуществляется это следующим образом. Прежде всего, значение соответствующе- 
го поля проверяется на правильность. Это делается с помощью обычного события 
опіприі: 


<1аре1 Ғог="соттпепёѕ">һћеп аіа уои #ігѕі Кпом уои мапёеа ёо 
ре а 2оокеерег?</1аре1> 


<іехіагеа іа="соптпепіѕ" опіприё="уа1ідаёеСотпепіѕ (Ећіѕ) "></іехіагеа> 


В данном примере событие оп1при* активизирует функцию уа1іадаёеСоттепёѕ (). От- 
ветственность за написание этой функции, проверку текущего значения поля 
<іпроё> и вызова метода ѕеіСиѕёопуа1іаі+у () лежит на разработчике. 


Если с текущим значением поля имеются проблемы, при вызове метода 
ѕеЕСиѕіопуа1ідібу() ему необходимо передать сообщение об ошибке. Если же те- 
кущее значение допустимо, этот метод вызывается с пустой строкой, таким обра- 
зом очищая специальные сообщения об ошибке, которые могли использоваться ра- 
нее. 


Далее приводится пример использования этого метода для проверки требования, 
чтобы значение в поле комментариев содержало не менее 20 символов: 


Ғипсііоп уа1іааёеСоптепіѕ (іприё) { 
1Е (1приё.уа1ае.1епаЕВ < 20) { 
іприё .зеіСизіопуа1іаіёу ("Уой пееа ёо соттпепё іп поге аеёаі1."); 
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е1зе { 


// Длина комментария 
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отвечает требованию . 


// Очищаем предыдущи 
1прие. зе Сизвощ\Уа11а 


} 


сообщения об ошибке. 
іёу (и Ш ) я 


На рис. 4.7 показан результат срабатывания этой функции при попытке отправить 
форму со слишком коротким комментарием. 


РЕКЗОМАТ [МЕОКМАТЮМ 

Аве* 6666666 

Сор Рета!е “ 
Уһеп аа уои І һаа а агеап. 

бг Кпоуг уои 

уапіеа ёо беа 

гоо-Кеерег?* 


Үоџ пее їо соттепі іп тоге деѓаіі. 


Рис. 4.7. Когда методу ѕзеЕСиѕіопуа1іаіёу () передается сообщение об ошибке, 


браузер обрабатывает ег 


о как собственное, встроенное сообщение об ошибке при проверке 


Конечно, эту задачу можно решить более элегантно с помощью регулярного выра- 
жения, требующего длинную строку. Но в то время как регулярные выражения 
прекрасно подходят для проверки определенных типов данных, специальная логика 
проверки может делать все, что угодно, от сложных алгебраических вычислений до 


установления связи с веб- 


ПРИМЕЧАНИЕ 


сервером. 


Имейте в виду, что посетители сайта могут видеть весь Јауа$5сгірі-код, поэтому он не 
подходит для реализации секретных алгоритмов. Например, для проверки правильно- 
сти кода товара, продаваемого по акции, нужно удостовериться, что сумма его цифр 
равна 12. Эту проверку вряд ли стоит реализовывать в специальной процедуре вали- 
дации на уауаЗспрь, т. к. могут найтись ловкачи, которые разберутся с вашим сцена- 


рием, создадут фаль 
товара. Такую провер 


шивые акционные коды, и тогда вы не напасетесь акционного 
ку следует осуществлять на стороне веб-сервера. 


Поддержка проверки браузерами 


Разработчики браузеров добавляли поддержку проверки в свои продукты по час- 


тям, вследствие чего нек 
сти валидации, но не об 


оторые версии браузеров поддерживают одни возможно- 
ращают внимания на другие. В табл. 4.2 указаны мини- 
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мальные версии основных браузеров, которые предоставляют солидную поддержку 
всем методам проверки, рассмотренным на данном этапе. 


Таблица 4.2. Поддержка проверки браузерами 


Г ГЕ ве Гомо вый онин нын [изя 


Минимальная 10* 4 10 5 (только для 10 
версия М/пао\м$) 


* На момент написания этой книги доступны только ранние бета-сборки этой версии. 


Так как проверка НТМГ5 не заменяет валидацию на стороне сервера, ее можно рас- 
сматривать как второстепенную возможность, когда даже такая несовершенная 
поддержка лучше, чем отсутствие вообще какой-либо поддержки. В браузерах, не 
поддерживающих проверку, таких как ІЕ 9, можно отправлять формы с некоррект- 
ными данными, но эти ошибки можно выявить на стороне сервера и возвратить эту 
страницу назад браузеру, но с указанными ошибками. 


С другой стороны, ваш веб-сайт может содержать сложные формы, в которых мож- 
но сделать массу ошибок при вводе данных, и вы не хотите потерять тех 
ТЕ-пользователей, которые после первой неудачной попытки заполнить вашу фор- 
му не предпримут другую. В таком случае у вас есть два пути: разработать и ис- 
пользовать свою систему проверки или же использовать библиотеку Јауа$сгірї, 
чтобы компенсировать умственную отсталость Е. Какой из этих двух подходов 
выбрать, зависит от объема и сложности проверки. 


Если нужно выполнить простую проверку небольшого количества полей, скорее 
всего, стоить сделать это своими силами. С помощью инструмента Мойегпіхг 
(см. разд. "Определение возможностей с помощью Мойетіг" главы 1) можно про- 
верить поддержку браузером разнообразных возможностей НТМІ.5-форм. Напри- 
мер, выяснить, поддерживает ли браузер атрибут расгегп можно с помощью свой- 
ства Модеги1 тк. 1прие.ракееги таким образом: 


1Е (!Модегпіхг.іприё.раіёегп) { 


// Данный браузер не поддерживает проверку регулярными выражениями. 


// Выполняйте проверку посредством Јауа$сгірё. 


ПРИМЕЧАНИЕ 


Свойство раёёегп — всего лишь одно из свойств, предоставляемых объектом 
Модегпіхг.іприё. Другие свойства, которые могут быть полезными для проверки 
поддержки браузерами форм, — это р1асеһо1дег, аџёоҒосиѕ, гедџігеад, тах, тіп и 
эсер. 


Конечно же, в этом примере не показано, когда выполнять эту проверку и каким 
образом реагировать на ее результаты. Если нужно, чтобы ваша процедура провер- 
ки походила на систему валидации НТМГ5, имеет смысл выполнять проверку, 
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когда пользователь пытается отправить форму. Для этого нужно обрабатывать со- 
бытие формы опѕортіє, после чего возвращать значение + кое (означающее, что дан- 
ные корректны и браузер может их отправить) или ға1ѕе (означающее, что с дан- 
ными имеются проблемы и браузер должен отменить отправку): 


<Ғогт 14="гооКеерегГоги" асііоп="ргосезѕзАрр1ісаііоп.сді" 
опѕцотіі="геіџгп уа1ідаеЕогт() "> 


В следующем листинге приведен очень простой пример процедуры специальной 
проверки, которая обеспечивает правильность заполнения требуемых полей: 


Ғипсііоп уа1ідаёбеЕогт() { 
1Е (!Модегпіхг.іприё.гедиігеа) { 


// Браузер не поддерживает требуемый атрибут; 
// проверяем необходимые поля своими силами. 


// Первым делом, получаем массив, содержащий все элементы. 


уаг 1прабЕ1етепез = аосопепіё .деіЕ1етепіВуІа ("2ооКеерегЕогт") .е1етепіѕ; 


// Далее сканируем все элементы массива. 


Ғог (хаг і = 0; 1 < іприоёЕ1етепіѕ.1епаёћ; і++) { 


// Проверяем, требуется ли этот элемент. 


1Е (іприЕ1Іемепіз [1] . паѕА+Егіриёе ("гедиігеа")) { 
// Если данный элемент требуется, проверяем, содержит ли 
// он значение. 


// Если не содержит, форма не проходит проверку, 


// и эта функция возвращает значение ЁЕа1з 


1Е (іприЕ1еюмепёѕ [1].уа1ае == "") тебагп Еа1зе; 


// Если мы достигли этой точки, все данные корректны, 
// и браузер может отправлять их. 


геіџгп ігие; 


СОВЕТ 


В данном фрагменте кода используется несколько основных методов программирова- 
ния УауаЗсйрь включая нахождение элементов, цикл и условные переходы. Более 
подробную информацию см. в приложении 2. 


Если же вы хотите сэкономить время и усилия на проверке значений полей слож- 
ной формы (и в то же самое время подготовиться к будущему), вам, может быть, 
лучше использовать заплатку Јауа$стірї для решения всех своих задач. Технически, 
подход такой же, как и в первом случае — страница проверяет поддержку браузе- 
ром возможностей валидации и сама выполняет требуемые проверки, которые не 
поддерживаются браузером. Разница заключается в том, что библиотека ЈауаЅсгірі 
уже содержит весь требуемый код. 
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По адресу ВИр://@пуи.соп/ро!уй$ можно найти длинный список библиотек 
Јауа$Ѕсгірі, которые все, по большому счету, делают то же самое. Одна из лучших 
среди этих библиотек — это иеБ/ютт52; загрузить ее можно по адресу №Ирз:// 
ойһор.сот/уеѕќопгиќег/ууерѓогт52. 


Библиотека уе /ютт52 реализует все рассмотренные на данный момент атрибуты. 
Для использования библиотеки загрузите все ее файлы в папку своего веб-сайта 
(а лучше в подкаталог папки веб-сайта) и добавьте в веб-странице следующую 
ссылку: 


<Һеаа> 
<Е1Е1е>...</&11е> 
<ѕсгірё ѕзгс="мерҒогтѕ2.)5"></ѕсгірё> 


<ћһеаа> 

Библиотека уерјогтѕ2 хорошо интегрируется с другой заплаткой ЈауаЅстірі, назы- 
вающейся йіт/5 И!авеіѕ. Она реализует поддержку возможностей форм, которые 
мы рассмотрим далее, таких как ползунок и средства выбора даты и цвета. Более 
подробную информацию об этой универсальной заплатке см. на веб-сайте 
угүгүу.иѕегасепітап.сот/еѕіѕћёті5ҮҮійғеќѕ. Обе эти библиотеки предоставляют 
хорошую общую поддержку для веб-форм, но содержат в своем коде неизбежные 


пробелы и незначительные ошибки. Качество сопровождения и усовершенствова- 
ния этих библиотек покажет только время. 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Несколько необычных атрибутов элемента <1приЕ> 


Стандарт НТМІ5 признает еще несколько атрибутов, используемых для управления 
браузером при заполнении форм, но не для проверки. Не все эти атрибуты поддержи- 
ваются всеми браузерами. 


Тем не менее, с ними хорошо экспериментировать. 


• Атрибут ѕре11сһеск. Некоторые браузеры пытаются заполнить пробелы в знани- 
ях правописания пользователя, проверяя орфографию вводимого текста. Очевид- 
ная проблема с этой услугой заключается в том, что не весь текст состоит из на- 
стоящих слов, и роспись волнистых красных подчеркиваний может очень быстро 
начать действовать пользователю на нервы. Чтобы браузер не проверял орфо- 
графию текста в поле, присвойте атрибуту зре11спеск значение Га1зе, а для про- 
верки — значение гое. (По умолчанию разные браузеры действуют по-разному 
в отношении проверки орфографии, а установка атрибута ѕре11сһеск приводит к 
единообразному поведению.) 


• Атрибут аџбосотр1е+е. Некоторые браузеры пытаются сэкономить время поль- 
зователя, предлагая при вводе информации в поле значения, которые вводились в 
это поле ранее. Такое поведение не всегда желательно — как указывается в спе- 
цификации НТМІ5, некоторая информация может быть конфиденциальной (на- 
пример, коды для запуска ядерных ракет) или оставаться актуальной только не- 
продолжительное время (например, одноразовый пароль входа в банковскую сис- 
тему самообслуживания). Для таких полей установите значение атрибута 
аціосотр1Іеѓе в оЕЕЁ, чтобы браузер не предлагал возможных вариантов заверше- 
ния вводимого в поле текста. А чтобы выполнять автозаполнение для определен- 
ного поля, установите значение его атрибута аоіосотр1еѓе В оп. 
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» Атрибуты аџцёосоггесі и ацёосаріёа1і2е. Эти атрибуты применяются для 
управления возможностями автоматического исправления и капитализации на не- 
которых мобильных браузерах, а именно в версиях Ѕаїагі для іРаа и іРһопе. 

» Атрибут шо1Е1р1е. Веб-разработчики использовали атрибут по1Е1р1е с элемен- 
ТОМ <зе1ес®> для создания списков с множественным выбором с незапамятных 
времен. Но сейчас они могут использовать этот атрибут с определенными типами 
элемента <іприё>, включая тип Е11е (для закачивания файлов) и ема11 (см. 
разд. "Адреса электронной почты" далее в этой главе). В браузере, поддержи- 
вающем этот атрибут, пользователь может выбрать сразу несколько файлов для 
закачивания на сервер или вставить несколько адресов электронной почты в одно 
поле. 


Новые типы элемента <іприѓ> 


Одной из странных особенностей НТМГ-форм является использование одного эле- 
мента с расплывчатым названием <1прое> для создания разнообразных элементов 
управления, от флажков до текстовых полей и кнопок. Конкретный вид элемента 
управления зависит от атрибута єуре элемента <1приф>. 


Если браузеру встречается неизвестный тип элемента <1прие>, веб-обозреватель 
рассматривает его как обычное текстовое поле. Это означает, что следующие три 
элемента обрабатываются абсолютно одинаково всеми браузерами: 


<1праЕ ёуре="ёехі"> 
<1приЕ ёуре="странный-престранный-тип-іприё"> 


<іприё> 


В НТМІ5 из этого поведения извлекается польза. А именно, в элемент <1прие> бы- 
ло добавлено несколько новых типов, и если какой-либо браузер не поддерживает 
их, он будет обрабатывать их как обычные текстовые поля. Например, для ввода 
адреса электронной почты можно создать поле <іприёє> нового типа етаі1: 


<1аре1 Ғог="етаі1">Етаі1 <еп>*</ет></1аБе1> 
<іпроё іа = "епаі1" ёуре="етаі1"><рг> 


Если просматривать страницу с этим кодом в браузере, который не поддерживает 
ТИП етаі1 для элемента <іпро> (например, Іпќегпеѓ ЕхріІогег), то это поле отобра- 
зится как обычное текстовое поле. Но браузеры, поддерживающие формы НТМГ5, 
немного умнее и могут делать следующее. 


С Предложить услуги редактирования. Например, интеллектуальный браузер 
может предоставить способ выбрать адрес электронной почты из адресной кни- 
ги и вставить его в поле адреса. 


П Предотвратить возможные ошибки. Например, браузер может не принимать 
буквы при вводе в поле типа попрег, или не принимать недопустимые даты, или 
вообще заставить пользователя выбирать даты из мини-календаря, что легче и 
безопаснее. 


С Выполнять проверку. Браузеры могут выполнять более сложные проверки по- 
сле того, как пользователь нажмет кнопку для отправки данных. Например, ин- 
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теллектуальный браузер выявит очевидные ошибки в адресе электронной ПОЧТЫ 
и откажется отправлять данные. 


Спецификация НТМІ5 не предоставляет разработчикам браузеров никаких настав- 
лений по первому пункту. Браузеры свободны управлять отображением и редакти- 
рованием разных типов данных любым имеющим смысл способом, и разные 
браузеры могут добавлять различные небольшие удобства. Например, мобильные 
браузеры могут воспользоваться этой информацией, чтобы специализировать вир- 
туальную клавиатуру под определенное приложение (рис. 4.8). 


іРоа = 19.13 = Род = 19.13 = 
ч Г |“ 7 
Теерпопе (їе!) Теерпопе (їе!) 

1 ) | ) 

Е-тай (ета!) Е-тай (ета!) 


! ) 0 


Ргемюиз$ Мех АЩОРИ Ргеуіоиѕ М№ехї АЩОРИ Ропе 


оме јнтјуји ој 
1550606006 


и 9890000 © 
027 |. ВЫ 


Рис. 4.8. При заполнении формы на мобильном устройстве у пользователей нет возможности работать 
с полной клавиатурой. В іРоа их участь облегчается предоставлением клавиатуры, специализированной 
под конкретный тип данных. Таким образом, для ввода телефонных номеров предоставляется цифровая 

клавиатура в стиле номеронабирателя телефона (слева), а для ввода адресов электронной почты — 
клавиша <@> и уменьшенная клавиша пробела (справа) 


Но более важными являются возможности проверки и исключения ошибок. Как 
абсолютный минимум, браузер с поддержкой НТМЕ5-форм должен не допустить 
отправки формы, содержащей данные, которые нарушают правила типов данных. 
Поэтому, если браузер не может предотвратить ошибки непосредственно при вводе 
(согласно второму пункту вышеприведенного списка), он должен выполнить их 
проверку, когда пользователь попытается отправить форму (согласно третьему 
пункту). 

К сожалению, не все современные браузеры удовлетворяют этим требованиям. Не- 
которые распознают новые типы данных и предоставляют кое-какие возможности 
редактирования, но не проверки. Многие браузеры понимают один тип данных, но 
не другой. Особенно проблемные в этом отношении мобильные браузеры — они 
предоставляют некоторые удобства редактирования, но никаких возможностей 
проверки. 
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В табл. 4.3 приведены новые типы данных и уровень полной поддержки их основ- 
НЫМИ браузерами. Полная поддержка означает, что в случае нарушения правил 
типа данных форма не отправляется. 


Тип 
данных 


Таблица 4.3. Поддержка новых типов данных основными браузерами 


Ргеох 


5 (только 
для 
Үіпаомѕ) 


Апагоіа 


5 (только 
для 
Үіпаомѕ) 


ѕеагсһ* 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


се1* 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


Нет 
данных 


пипрек 


10 


5 (только 


для 
Үіпаомѕ) 


гапде 5 


ааёеёіпте, = 
ааїе, 
топЕћ 
меек, Е1те 


со10ог 


* Стандарт НТМІ5 не требует проверки для этого типа данных. 


** Хотя браузер для іО8 не поддерживает проверку, предоставление этим браузером специализи- 
рованных клавиатур (см. рис. 4.8) является значительным удобством, поэтому в приложениях для 
этого веб-обозревателя стоит использовать специальные типы данных. 


СОВЕТ 

Кстати, поддержку типов данных можно выполнить с помощью свойств объекта 
Модегпіхг.іпроёёуреѕ инструмента Модегпіхг. Например, если браузер поддержи- 
вает тип данных гапде, свойство Мойегпіхг.іприіёуреѕ.гапасе возвращает значе- 
ние Сое. 


Адреса электронной почты 


Тип данных епа11 используется для полей, предназначенных для ввода адресов 
электронной почты. В общем, адрес электронной почты состоит из строки симво- 
Лов (использование некоторых символов не допускается). Допустимый адрес дол- 
жен содержать символ @ и точку, между которыми должен быть минимум один 
символ, а после точки — минимум два символа. Вроде бы простые правила, но их 
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логическая реализация или создание регулярного выражения для проверки адресов 
электронной почты оказывается на удивление сложной задачей, о которую спо- 
ткнулся не один решительно настроенный веб-разработчик. Поэтому радует суще- 
ствование браузеров, которые поддерживают тип данных ета11 и выполняют про- 
верку этих данных автоматически (рис. 4.9). 


СОМТАСТ ОЕТАП $ 

Мате * ОЧ 

Таервопе (ххх) ххх-хххх 

Етай * гакеѕћ з@етайзратитегз.сот 


РІеаѕе епїег ап ета! аййгеѕѕ. 


Рис. 4.9. Браузер Еігеѓох отказывается принять адрес электронной почты, содержащий пробел 


Тип епа11 поддерживает атрибут по16ір1е, который позволяет вводить несколько 
адресов в поле. Но эти несколько адресов все равно выглядят, как одна строка тек- 
ста, только разделены запятыми. 


ПРИМЕЧАНИЕ 


Не забывайте, что пустые значения проходят проверку. Чтобы не допустить пустого 
поля адреса, в его элемент нужно вставить атрибут геасоігеа (см. разд. "Как работа- 
ет проверка НТМІ 5" ранее в этой главе). 


УВЁ-адреса 


Тип уві применяется для полей ввода ОКІ -адресов. Вопрос, что является допусти- 
мым ОВГ, продолжает горячо обсуждаться. Но большинство браузеров применяет 
сравнительно нестрогий алгоритм проверки. Адрес должен содержать префикс (ко- 
торый может быть как настоящим, типа /йіїр:/, так и выдуманным, типа Бопк//) 
и позволяет вводить пробелы и большинство специальных символов, за исключе- 
нием двоеточия (:). 


Некоторые браузеры также предлагают возможные варианты ОВТ, в выпадающем 
списке, которые обычно взяты из журнала недавно посещенных браузером страниц. 


Поля поиска 


Тип ѕеагсһ применяется для полей поиска. Они обычно предназначены для ввода 
ключевых слов, по которым потом выполняется какой-либо вид поиска. Это может 
быть поиск по всему Интернету (как в Соое на рис. 4.1), поиск по одной странице 
или же специальная поисковая процедура, которая исследует каталог информации. 
В любом случае поле поиска выглядит и ведет себя почти точно так же, как и 
обычное текстовое поле. 


158 Часть 11. Создание современных веб-страниц 


В некоторых браузерах, например Зап, поле поиска выглядит слегка по-другому 
и имеет скругленные углы. Кроме этого, когда пользователь начинает вводить дан- 
ные в поле поиска в браузере Ѕаѓагі или Сһготе, с правой стороны поля выводится 
небольшой значок в виде Х, щелкнув по которому можно очистить поле. За исклю- 
чением этих незначительных различий, поле поиска является ничем иным, как 
обычным текстовым полем. Основная разница заключается в семантике. Иными 
словами, тип данных зеагсһ используется для того, чтобы сделать ясным назначе- 
ние поля для браузеров и вспомогательных программ для пользователей с ограни- 
ченными возможностями. Они могут направлять посетителей в требуемое место 
страницы или предоставлять другие, более интеллектуальные услуги — возможно, 
в будущем. 


Телефонные номера 


Тип данных єе1 применяется с целью обозначения полей для ввода телефонных 
номеров, которые могут быть представлены в самых разных форматах. В одних 
случаях используются только цифры, в других применяются пробелы, тире, знак 
"плюс" и круглые скобки. Возможно, это отсутствие единого формата и есть при- 
чина того, что стандарт НТМГ5 не требует от браузеров выполнения проверки те- 
лефонных номеров. Вместе с тем, не понятно, почему поле типа єе1 не отклоняет, 
по крайней мере, буквы. 


В настоящее время единственная польза от применения поля типа еї состоит 
в предоставлении специализированной виртуальной клавиатуры для ввода теле- 
фонных номеров на мобильных браузерах, которая содержит цифры, но не имеет 
букв. 


Числа 


В НТМІ5 определяются два числовых типа данных. Тип помьехк предназначен для 
обычных чисел. 


Этот тип данных имеет очевидный потенциал. Обычные текстовые поля принима- 
ют буквально все: цифры, буквы, пробелы, знаки пунктуации и знаки, обычно при- 
меняемые для обозначения выражения отрицательных эмоций персонажами комик- 
сов. По этой причине одна из самых распространенных задач проверки — убедить- 
ся, что значение является числом в определенном диапазоне. Но при вводе данных 
в поле типа потрег браузер автоматически игнорирует все символы, кроме цифр. 
Далее показан пример кода для создания поля этого типа: 


<1аре1 Ғог="аде">Аде<ет>*</ет></1аре1> 
<1приЕ іа="асде" ёбуре="потрег"><рг> 


Конечно же, есть много чисел, которые не подходят для каждого типа числовых 
данных. Например, в приведенной выше разметке разрешается возраст наподобие 
43 000 или —6 лет, что несколько не соответствует реальности. Эта проблема реша- 
ется с помощью атрибутов піп и пах. В следующем коде представлен пример огра- 
ничения возраста разумным диапазоном от 0 до 120 лет: 


<1праЕ іа="аде" ёбуре="питрег" міп="0" тах="120"><рг> 
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Обычно поля типа попюрег принимают только целые числа, а дроби, например 30,5, 
не разрешаются. (Более того, некоторые браузеры даже не позволят ввести деся- 
тичный знак.) Но это поведение также можно изменить с помощью атрибута э+ер, 
который указывает шаг изменения числа (в большую или меньшую сторону). На- 
пример, установив значение э+ер в 0.1, можно вводить такие значения, как 0,1, 0,2 
0,3 и т. д. Но попробуйте отправить форму со значением 0,15, и вы получите зна- 
комое всплывающее сообщение об ошибке. По умолчанию значение шага равно 1. 


<1аре1 Ғог="меісһі">їеідһі (іп роппаз) </1аре1> 
<1приЕ іа="пеідһі" ёуре="поипрег" тіп="50" тах="1000" ѕёер="0.1" 
уа1џе="160"><рг> 


Атрибут э+ер также влияет на работу кнопок поля со счетчиком (рис. 4.10). 


Угевћ (а 


роиџпаѕ) 


Рис. 4.10. Многие браузеры оформляют поле типа попрег в виде наборного счетчика. 
Каждый щелчок по кнопке набора увеличивает или уменьшает значение на величину шага, 
пока не будет достигнуто максимальное или минимальное установленное значение 


Ползунки 


Другим числовым типом НТМГ5 является гапое. Подобно типу польех, этот тип 
может представлять целые и дробные значения. Также поддерживает атрибуты тіп 
И пах для установки диапазона значений. Далее показан пример кода для создания 
поля этого типа: 


<1абе1 Ғог="меісһі">їеідһі (іп роџпаѕ) </1аре1> 
<іпроиё іа="кеідһі" ёуре="гапде" тіп="50" пах="1000" уа1џе="160"><рг> 


Разница состоит в том, каким образом поле типа гапае представляет свою инфор- 
мацию. Вместо счетчика, как для поля типа пощьег, интеллектуальные браузеры 
отображают ползунок (рис. 4.11). 


М\ав бл | п ) 
рочпаѕ) 0 300 


Рис. 4.11. Вам, скорее всего, приходилось использовать элементы управления наподобие поля гапое 
для выбора значения в диапазоне, например уровня звука. Поля этого типа хорошо подходят для ввода 
информации в узком диапазоне с известным минимальным и максимальным значениями, когда важно 
не точное значение, а его расположение относительно минимума и максимума 


Чтобы установить значение типа гапде, нужно просто перетянуть ползунок в тре- 
буемую позицию между минимальным и максимальным значениями. Но браузеры, 
поддерживающие этот тип поля, не предоставляют никакой обратной информации 
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об установленном значении. Чтобы получить эти сведения, в разметку нужно доба- 
вить процедуру Лауабспирь которая реагирует на изменения положения ползунка 
(возможно, посредством обработки события опсћапое), а потом отображает эту ин- 
формацию рядом с полем. Конечно же, также нужно проверить (с помощью инст- 
румента наподобие Модеги1тт), поддерживает ли браузер тип гапое, и если нет, то 
надобность в исполнении этого кода отпадет, т. к. значение будет отображаться 
в обычном текстовом поле. 


Дата и время 


В НТМІ5 определяется несколько типов данных, связанных со временем. Браузе- 
ры, которые поддерживают типы дат, могут выводить удобный выпадающий ка- 
лендарь, в котором пользователь может выбрать требуемую дату и/или время. Это 
не только устраняет неопределенность относительно правильного формата даты, но 
также запрещает случайно (или нарочно) установить несуществующую дату. Ин- 
теллектуальные браузеры могут делать еще больше, например поддерживать инте- 
грацию с персональным календарем. 


В настоящее время, несмотря на их очевидную пользу, поддержка временных ти- 
пов данных находится на низком уровне. Орега — единственный браузер, который 
предоставляет выпадающий календарь (рис. 4.12). Браузер Сһготе обеспечивает 
минимальную поддержку дат: даты отображаются подобно числам в наборных 
счетчиках и выполняется проверка введенных значений. 
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Рис. 4.12. Поле <іпро+> отображается несколько по-другому для дат и времени (слева). 
Но настоящее удобство (к сожалению, предоставляемое только браузером Орега) 


заключается в выпадающем календаре, с помощью которого можно установить требуемую дату, 
не беспокоясь, в каком формате это делать 


СОВЕТ 


При использовании этих типов данных подумайте о применении заполнителей 
(роІуйііѕ) для браузеров, которые не поддерживают эти типы, например библиотеку 
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т/5ИЛаде (ммм. изегадептитапт.сотАе${$/ит15МЛаде{$), рассмотренную в разд. "Под- 
держка проверки браузерами" ранее в этой главе. Идея эта хороша потому, что поль- 
зователи с такими браузерами могут легко ошибиться и ввести дату в неправильном 
формате, а выполнять проверку данных самому и предоставлять необходимые инст- 
рукции — слишком трудоемкая задача. (Это объясняет, почему уже существуют эле- 
менты управления УауаЗсйр{ для дат и времени и применяются повсюду в веб- 
страницах.) 


В табл. 4.4 перечислены шесть новых форматов для дат и времени, дано их краткое 
описание и пример использования. 


Таблица 4.4. Типы данных для дат и времени 


Тип данных Описание 


ааёе Дата по шаблону ГГГГ-ММ-ДД 25 января 2012 г.: 
2012-01-25 


біте Время в 24-часовом формате с необязатель- | 14:35 (и 50,2 секунды): 
ными секундами, по шаблону чч:мм:сс.сс 14:35 или 14:35:50.2 


ЧасеЕ1те-1оса1 | Дата и время, разделенные прописной 25 января 2012 г., 14:35: 
английской буквой Т (по шаблону 2012-01-25114:35 
ГГГГ-ММ-ДД 7чч:мм:сс) 


ааъеёіте Дата и время, как и для типа дабебіте- 25 января 2012 г., 14:35 


1оса1, но со смещением временного пояса. в Нью-Иорке: 
Используется такой же шаблон 2012-01-25Т14:35-05:00 
(ГГГГ-ММ-ДД Тчч:мм:сс-чч: мм), как и для 
элемента <= 1те>, рассмотренного 

в разд. "Обозначение дат и времени 

с помощью элемента <іте>" главы 3 


Год и номер месяца по шаблону ГГГГ-ММ Первый месяц 2012 г.: 
2012-01 


Год и номер недели по шаблону ГГГГ- Инн. Вторая неделя 2012 г.: 
Обратите внимание, что в зависимости от 2012-И/О2 
года может быть 52 или 53 недели 


СовеТ 


Браузеры, которые поддерживают типы данных для дат и времени, также поддержи- 
вают атрибуты тіп и тах для них, что позволяет устанавливать минимальные и мак- 
симальные даты при условии использования правильного формата даты. Таким обра- 
зом, ограничить даты 2012 годом можно следующим кодом: <1праЕ фуре="аасе" 
тіп="2012-01-01" пах="2012-12-31">. 


Цвет 


Тип данных со1ог применяется для полей, предназначенных для ввода цвета. Тип 
данных со1ог — это интересная, хотя редко используемая второстепенная возмож- 
ность, позволяющая посетителю веб-страницы выбирать цвет из выпадающей па- 
литры, похожей на палитру графического редактора М5 Раш. В настоящее время 
эту возможность поддерживает только браузер Орега. Для других браузеров нужно 


162 Часть 11. Создание современных веб-страниц 


ВВОДИТЬ шестнадцатеричный код цвета самому (или использовать библиотеку 
1т15 Таве5 (түгү.иѕегавепітап.сот/еѕіѕЉеті5Уідреѓѕ). 


Новые элементы 


На данном этапе мы узнали, как усовершенствовать формы с помощью новых воз- 
можностей НТМГ5-проверки и дополнительных типов данных полей ввода. Это 
наиболее важные новые возможности с наивысшим уровнем поддержки в браузе- 
рах, но НТМГ5$ не останавливается на этом. 


В стандарте также вводится несколько совершенно новых элементов. С их по- 
мощью в форму можно добавить список предложений, индикатор выполнения за- 
дания, панель инструментов и многое другое. Проблема с этими новыми элемента- 
ми заключается в том, что старые браузеры точно не поддерживают их, и даже но- 
вые браузеры не особо спешат с предоставлением поддержки, пока спецификация 
окончательно не утверждена. Таким образом, в последующем материале рассмат- 
риваются возможности с самым низким уровнем поддержки изо всех возможно- 
стей, рассмотренных в этой главе. Желательно разобраться, как они работают, но 
при этом разумно воздержаться от их использования, пока вы не будете уверены 
в том, что браузеры их поддерживают. 


Подсказки ввода <ааа!5$Ь 


Элемент <дата11з=> предоставляет способ присоединить выпадающий список воз- 
можных вариантов ввода к обыкновенному текстовому полю. Заполняющим форму 
пользователям он дает возможность либо выбрать вариант ввода из списка значе- 
ний, либо ввести требуемое значение вручную (рис. 4.13). 
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Рис. 4.13. По мере ввода значения в поле браузер предлагает возможное требуемое значение. 
Например, при вводе букв "са" браузер показывает все названия зверей, которые содержат 
эту последовательность в любом месте (не обязательно в начале) 
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Чтобы использовать элемент дата11з+, сначала нужно создать обычное текстовое 
поле. Допустим, мы создали обычный элемент <іприё>: 


<1едепа>Ма®'з Үоџг Ғауогібе Апіта1?</1едепа> 
<іприё іа=" ҒауогіёеАпіта1"> 


Чтобы добавить к этому полю выпадающий список возможных значений, для него 
нужно создать элемент <адата1іѕі>. Технически этот элемент можно разместить 
в любом месте разметки, т. к. он не отображается браузером, а просто предоставля- 
ет данные для использования в текстовом поле ввода. Но логично поместить этот 
элемент либо непосредственно перед тем элементом <іпроиё>, для которого он пре- 
доставляет свои данные, либо сразу же после него. Далее показан пример кода для 
создания списка <дафа11$%>: 


<Чафа11$Е іа="апіта1Сһоісеѕ"> 


<орііоп 1абе1="А1 раса" уа1ае="а1раса"> 
<орііоп Іаре1="лерга" уа1ае="херга"> 
<орііоп Іаре1="Саї" уа1ае="са®"> 
<орііоп Іаре1="Сагіроц" уа1џе="сагіроиц"> 
<орЕ1оп Іаре1="Саіегрі11аг" уа1џе="саёегрі11аг"> 
<орііоп Іаре1="Апасопаа" уа1ае="апасопаа"> 
<орЕ1оп Іаре1="Нитап" уа1ае="Батап"> 
<орЕ1оп Іаре1="Е1ерһапіё" уа1ае="е1еррап®"> 
<орііоп 1абе1="М11аереез®" хуа1ае="м11аереезе"> 
<орЕ1оп Іаре1="Рідеоп" уа1џе="рідеоп"> 
<орЕ1оп Іаре1="Сгар" уа1ае="сгкар"> 
</адаёа1ізі> 


Как и традиционное поле <ѕе1іесі>, СПИСОК <даба1іѕі> использует элементы 
<орЕ1оп>. Каждый элемент <орєіоп> представляет собой отдельное возможное зна- 
чение, которое браузер может предложить заполняющему форму. Значение атрибу- 
Та 1аБет содержит текст, который отображается в текстовом поле, а атрибут 
уа1џе — текст, который будет отправлен на сервер, если пользователь выберет дан- 
ную опцию. Сам по себе список <дака11з=> не отображается в браузере. Для того 
чтобы подключить его к текстовому полю, нужно установить значение атрибута 
1155 равным значению параметра іа соответствующего списка <даба1іѕё>: 


<іприі 1а="Еауог1еАп1та1" Іїіѕё="апіта1Сһоісеѕ"> 


В браузерах, которые поддерживают <дабаііѕіё> (а в настоящее время это только 
Орега 10 и Епеѓох 4 или более поздние версии), посетители увидят результат, как 
на рис. 4.13. Другие браузеры будут игнорировать атрибут 1іѕ+ и разметку 
<даба1іѕ+>, делая все предложения возможного ввода бесполезными. 


Но эту проблему можно исправить с помощью хитрого резервного решения, кото- 
рое заставляет старые браузеры вести себя как следует. Трюк заключается в том, 
чтобы вставить другое содержимое в список <даса1іѕё>. Этот подход работает по- 
тому, что браузеры, которые поддерживают элемент <даба1іѕё>, обращают внима- 
ние только на элементы <орЕ+оп> и игнорируют все другое содержимое. В следую- 
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щем листинге приводится разметка, в которой используется это поведение. (Жир- 
ным шрифтом выделен код, который будет игнорироваться браузерами, поддержи- 
вающими элемент <даба1ізѕї>.) 


<1едепа>Ма®'з Үоџг Ғауогібе Апіта1?</1едепа> 
<Чафа11$Е іа="апіта1Сһоісеѕ"> 
<зрап с1аѕѕ="Шаре1">Ріск ап орііоп:</ѕрап> 
<ѕе1есі іа=" ҒауогіёеАпіта1Ргеѕеі"> 


<орёіоп 1аре1="А1раса" уа1ае="а1раса"> 
<орёіоп 1аБе1="7ерга" уа1џе="2ерга"> 
<орёіоп Іаре1="Саі" уа1ае="са®"> 
<орЕ1оп Іаре1="Сагірои" уа1џе="сагіроиц"> 


<орііоп Іаре1="Саёегрі11аг" уа1оџе="саіегрі11аг"> 


<орёіоп Іаре1="Апасопаа" уа1ае="апасопаа"> 
<орііоп Іаре1="Ниотап" уа1џе="Һотап"> 
<орііоп Іаре1="Е1ерһапі" уа1џе="е1ерһапі"> 
<орёіоп 1аре1="М11аереез®" уа1ае="м11Ааереез®"> 
<орііоп Іаре1="Рідеоп" уа1џе="рідеоп"> 
<орііоп Іаре1="Сгар" уаџе="сгар"> 

</ѕеїІесі> 

<рг> 

<зрап с1Іаѕѕ="Шаре1">Ог +уре і іп:</ѕрап> 

</адаёа1ізі> 


<іприё 11ѕё="апіта1Сһоісеѕ" паме="1іѕі"> 


Удалив код, выделенный жирным шрифтом, получим практически такую же раз- 
метку, как в предыдущем листинге. Это означает, что браузеры, которые распозна- 
ют элемент <даба1ізё>, будут отображать только одно текстовое поле и выпадаю- 
щий список предлагаемых вариантов ввода, как показано на рис. 4.13. Но для дру- 
гих браузеров этот дополнительный код облекает предлагаемые варианты ввода 
в традиционный список <ѕеіес+>, предоставляя пользователю возможность ввести 
собственное значение или же выбрать готовое значение из списка (рис. 4.14). 


Но этот подход не работает незаметно. При получении данных формы 
на сервере необходимо проверить на наличие данных из списка <ѕеїесі> 
(ҒауогібеАпіта1Ргеѕеб) и ИЗ списка <даба1ізе> (апіпа1Сһоісеѕ). Но за исключением 
этого незначительного недостатка, это надежный способ предоставить новое удоб- 
ство всем пользователям без исключения. 


ПРИМЕЧАНИЕ 


Элемент <даёба1іѕё> вначале имел возможность, позволяющую ему получать воз- 
можные варианты ввода из каких-либо других источников, например, он мог отправить 
вызов на веб-сервер, который потом извлек бы список предлагаемых вариантов ввода 
из базы данных. Эта возможность, может быть, еще будет добавлена в одной из 
будущих версий стандарта НТМЕ, но в настоящее время реализовать ее можно толь- 
ко с помощью сценария Јауа$сгірі, использующего объект хХМтНеЕрвВеачезе 
(см. разд. "Объект ХМІНірВедиеѕі" главы 11) для получения данных. 
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Рис. 4.14. Возможные варианты ввода можно предлагать и в браузерах, 


которые не поддерживают элемент <дДабса1ізі>, обернув их сначала в список <зе1есЕ> 
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Новые графические элементы <ргодгеѕз> и <тефег> (рис. 4.15) внешне похожи друг 
на друга, но имеют разные назначения. 
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Ош 5оа1 15 {о газе $50,000 {ог 5ТЕ (бахе Һе 
Гетитнияз Рочл4аноп). 
Фо Ёат тече гаіѕей $14,000. 


Рис. 4.15. В браузерах, которые поддерживают элементы <ргоадгезз> и <«теіег>, эти элементы 
визуально отображают информацию (слева). В других браузерах эта информация отображается 


2 


посредством резервного решения (справа) 


Элемент <ргодгеѕѕ> отображает ход выполнения задания посредством зеленой 
пульсирующей полоски на сером фоне. Визуально элемент <ргодгезз> похож на 
индикаторы выполнения, с которыми вам, вероятно, приходилось не раз встречать- 
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ся (например, индикатор выполнения копирования в операционной системе 
\т9о%/$), хотя его точный внешний вид зависит от браузера, в котором просмат- 
ривается страница. 


Элемент <пебег> указывает значение в диапазоне известных значений. Внешне он 
похож на элемент <ргосгеѕѕ>, но зеленая полоска имеет другой оттенок и не пуль- 
сирует. В зависимости от браузера цвет индикаторной полоски элемента <пекег> 
может меняться при отображении значения, определенного как "слишком низкое" 
или "слишком высокое". Например, в браузере Стоте при отображении последне- 
го значения цвет индикатора меняется с зеленого на желтый. Но самая важная 
разница между элементами <ргодгеѕѕ> И <тефег> заключается в их семантическом 
значении. 


ПРИМЕЧАНИЕ 


Для помещения в форму элементов <тесехг> и <ргодкезз> нет надобности. Более 
того, они даже не являются настоящими элементами управления формы, т. к. не со- 
бирают информацию от посетителя веб-страницы. Но официальный стандарт НТМЕ5 
включает их потому, что в некоторых отношениях они чувствуются как элементы 
формы, возможно, из-за графического отображения данных. 


В настоящее время элементы <ргодгеѕэ> И <тесег> поддерживаются браузерами 
Сһготе 9, Орега 11 и Ѕаѓагі 5.1 (а также их более поздними версиями). Браузеры 
Еігеѓох и Пиегпе! Ехр]огег эти элементы еще не поддерживают. 


Применение элементов <ргодгезз> и <шесег> не составляет никакого труда. Сначала 
рассмотрим элемент <ргодтезз>. Он использует атрибут ха1џе, который обозначает 
ход выполнения задания в виде дробной величины от 0 до 1. Графически это ото- 
бражается соответствующей шириной полоски индикатора. Например, чтобы пока- 
зать, что задание выполнено на 25%, атрибуту уа1ае присваивается значение 0,25: 


<ргодгеѕѕ уа1ае="0.25"></ргодгезз> 

Альтернативно, можно использовать атрибут пах, чтобы установить максимальное 
значение и изменить масштаб индикатора. Например, при значении пах, равном 
200, значение уа1ае должно быть между 0 и 200. Если сделать значение уа1ле рав- 


ным 50, то получим те же самые 25% заполнения индикатора, как и в предыдущем 
примере: 


<ргодгеѕѕ уа1ае="50" тах="200"></ргодгеѕѕ> 


Масштаб используется просто в целях удобства, т. к. цифровое значение в индика- 
торе не отображается. 


ПРИМЕЧАНИЕ 


Элемент <ргодгеѕѕ> — всего лишь средство для отображения нарядного индикатора 
выполнения. Сам по себе этот элемент ничего не делает. Например, если индикатор 
выполнения применяется для отображения хода исполняющегося в фоне задания 
(скажем, используя фоновые вычисления, как рассматривается в разд. "Выполнение 
вычислений в фоновом режиме" главы 12), ответственность за создание Уауа$спр{- 
кода для изменения значения уа1ие элемента <ргодгезз> лежит на веб-разра- 
ботчике. 
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Браузеры, которые не поддерживают элемент <ргодгезз>, попросту игнорируют 
его. Эту проблему можно решить, вставив в элемент <ргодгеѕѕ> резервное содер- 
жимое следующим образом: 


<ргодгеѕѕ уа1ае="0.25">25%</ргодгезз> 


При этом следует помнить, что это резервное содержимое не будет отображаться 
В браузерах, которые поддерживают этот элемент. 


Для индикатора выполнения есть еще одна опция в виде неопределенного состоя- 
ния индикатора, которое указывает, что задание выполняется, но точное время его 
завершения неизвестно. (Индикатор в неопределенном состоянии можно рассмат- 
ривать как вычурное сообщение "Задание в процессе выполнения".) Визуально ин- 
дикатор в неопределенном состоянии выглядит как серое поле, вдоль которого пе- 
риодически слева направо пробегает зеленая размытая полоска. Чтобы создать этот 
индикатор, просто не употребляйте атрибут уа1те: 


<ргодгезз>Таѕк іп ргодгеѕѕ...</ргодгезѕз> 


Элемент <тебег> имеет подобную модель, но отображает любой вид измерений. 
Иногда его еще называют шкалой. Часто значение атрибута уа1ае этого элемента 
отображает какую-то действительную величину, например денежную сумму на 
счету, количество дней, вес в килограммах и т. п. Отображение этой информации 
управляется установкой значений атрибутов піп И пах: 


Үооџг з016сазе меідһћѕ: <мебег тіп="5" шах="70" уа1ае="28"> 
28 роппаз</мефег> 


Как и для элемента <рходтезз>, содержимое внутри элемента <песег> отображается 
только в браузерах, которые не поддерживают его. Но иногда значение элемента 
<пебег> нужно вывести в числовом формате. В таком случае его нужно задать на 
странице обычной разметкой; при этом резервное значение внутри элемента не 
требуется. Этот подход демонстрируется в следующем примере. Вся информация 
выводится на страницу обычной разметкой, а элемент <пебег> додается в качестве 
необязательного визуального ориентира: 


<р>Оџг доа1 із іо гаіѕе $50,000 Ғог ЅІЕ (Ѕауе ће 
Іеттіпоѕ Ғоџпадабіоп) .</р> 


<р>бо Еаг ме'уе га1зеа 514,000. <пеёег тах="50000" уа1ае="14000"></мефех> 


Элемент <пекег> также достаточно интеллектуальный, чтобы указывать значения 
выше или ниже допустимых и в то же самое время отображать их должным обра- 
зом. Для этого в нем используются атрибуты 1ом и һіфһ. Например, значение уа1џе, 
превышающее значение һісћ, но меньше значения пах, будет выше какого-то тре- 
буемого значения, но все еще в пределах допустимого максимального значения. 
Подобным образом значение уа1ае ниже значения 1ом, но выше значения тіп, не 
удовлетворяет какому-либо требованию низкого значения, но будет все еще в пре- 
делах допустимого минимального значения. 
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В следующем листинге показан пример использования атрибута Втор: 


Усиг зиіёсаѕе меідћ: 

<пеёег тіп="5" тах="100" Һіһ="70" уа1џе="79">79 роцпаѕ</теёег>* 

<р><ѕпа11>* А зоигсһагде арр11ез іо ѕзиіёсазеѕ Пеауіег ЕВап 70 роппа$. 
</зта11></р> 


Браузеры могут использовать или не использовать информацию атрибутов 1ом и 
һіһ. Например, браузер Сһготе отображает слишком высокие значения (как в пре- 
дыдущем примере) желтым цветом, но значения ниже Іоу показывает как обычные. 
Наконец, атрибут оріітот служит для указания определенного оптимального значе- 
ния, но использование этого атрибута не влияет на отображение этого значения в 
современных браузерах. 


В общем, атрибуты <ртодтезз> и <тефег> предоставляют незначительные удобства, 
которые будут полезными, когда уровень их поддержки браузерами будет немного 
выше. 


Элементы <соттапа> и <тепи> 
для создания кнопок команд и меню 


Эти две возможности можно считать самыми замечательными, но пока не реализо- 
ванными. Идея заключается в том, чтобы использовать один элемент для представ- 
ления действия, которое пользователь может активировать (т. е. <соттапа>), а дру- 
гой элемент для группирования нескольких таких элементов (т. е. <тепи>). В зави- 
симости от конструкции и оформления элемент <пепао> может принимать какие 
угодно формы, от панели инструментов, закрепленной на стороне окна браузера, до 
всплывающего меню, открывающегося при щелчке мышью где-либо на странице. 
Нов настоящее время ни один из браузеров не поддерживает эти элементы, поэто- 
му нужно подождать, чтобы узнать, действительно ли они такие замечательные. 


Веб-страница как НТМІ -редактор 


Как мы узнали в главе 1, одним из принципов НТМІ5 является асфальтирование 
тропинок, иными словами, официальное признание частью стандарта нестандарт- 
ных возможностей, которые уже широко используются веб-разработчиками. Одним 
из наилучших примеров следования этому принципу является включение в стан- 
дарт двух необычных атрибутов — сопгепёЕйібарІе И йеѕідпмоде, которые позво- 
ляют сделать из обыкновенного браузера простой НТМГ-редактор. 


Эти два атрибута не новы. Более того, их поддержка была добавлена еще в Іпќегпеї 
Ехр|огег 5 на заре становления Интернета. В то время большинство разработчиков 
отказалось от их использования, рассматривая их всего лишь как расширения 
\Мтдо\з для Интернета. Но с течением лет все больше браузеров начали копиро- 
вать применяемый в [Е практический, но причудливый подход к расширенному 
НТМІ-редактированию. В настоящее время все браузеры для настольных компью- 
теров поддерживают эти атрибуты, хотя они никогда и не были частью официаль- 
ного стандарта. 
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Редактирование элементов 
с помощью атрибута сопѓепіЕаіїіаЫе 
Рассмотрим первый инструмент для НТМІ-редактирования — атрибут 


сопЕепЕЕа1еа1е. Добавление этого атрибута к любому элементу позволяет редак- 
тировать содержимое этого элемента, когда оно отображается в окне браузера: 


<аіу іа="еаіёарІеЕ1етмепё" сопёепіЕаібар1Іе>Үои сап еаії ёһіз іехі, 
1Е уоџ'а 1іке.</4іу> 


Скорее всего, вы не заметите никакой особенности в отображении этого текста 
в браузере. Но щелчок где-либо в отображаемом браузером тексте помещает в него 
курсор редактирования (рис. 4.16). 


- [===] а [==] 53-838) 
— Э {8 | ЕіетепіЕайіпд.ҺМп © ~ ә Ж | Ш = 5 114) Еетет Ета. т О > ЭХ | 1л) 
| ё Бетеп Едїбпд | | | ё етеп Еаїбто | | 
ЕанќаЫе <а1х> Веолу: ЕанаЫе <йіу> Веолу: 
Үои сап ен {#15 іехі, Ш уои’ а НКе. Үои сап ей НЕ 15 {ех®, і уоч’'а НКе. 


і уои а НКе. 
і уои а Ке. 


Ғуош'а НКе 


Рис. 4.16. Щелчок мышью в редактируемой области помещает в нее курсор редактирования, 
после чего в ней можно перемещаться с помощью клавиш со стрелками, а также добавлять и удалять 
текст (слева). Или выделять текст, который потом можно вырезать, копировать и вставлять (справа). 
Это немного напоминает редактирование в обычном текстовом редакторе, только курсор нельзя 
устанавливать за пределами области, определенной тегами <41і у>, хотя добавление текста расширяет 
эту область вплоть до заполнения всего окна и дальше 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Когда применять НТМЁ-редактирование? 


Прежде чем приступить к использованию расширенного НТМЕ-редактирования, стоит 
узнать, а для чего оно вообще-то применяется. Несмотря на мгновенно производимое 
впечатление, НТМІ-редактирование является специализированной возможностью, ко- 
торая не каждому понравится. Имеет смысл использовать его, чтобы предоставить 
пользователям быстрый способ изменять НТМЕ-содержимое, например, добавлять 
сообщения в блоги, вносить обзоры, подавать объявления или составлять сообщения 
другим пользователям. 


Но даже если вы решите, что вам нужны такие возможности, атрибуты сопеепЕЕа1еар1е 
и деѕіспмоде могут оказаться не лучшим выбором для их реализации. Они не предос- 
тавляют разработчику всех удобств настоящего инструмента для веб-дизайна, таких 
как команды для редактирования разметки, возможность просматривать и редактиро- 
вать исходный НТМЁ-код, средства проверки орфографии и т. п. Создание намного 
более функционального редактора с помощью расширенного НТМІ -редактирования 
возможно, хоть и с приложением определенных усилий. Но если вам действительно 
требуется функциональность расширенного редактирования, может быть, лучше вос- 
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пользоваться чьим-то другим уже готовым редактором, который можно вставить 
в свои страницы. Обзор наиболее популярных редакторов см. по адресу 
ћїр://ајахіап.сот/агсһімеѕ/гісћехіеаіїогѕ-сотрагеа. 


В приведенном ранее примере редактируемая область <аіу> содержала только 
текст. Но с такой же легкостью в нее можно вставить другие элементы. В действи- 
тельности, элемент <діу> может содержать разметку всей веб-страницы, делая ее 
редактируемой. Так, атрибут сопеереЕа1еар1е можно применять к нескольким эле- 
ментам, позволяя редактировать несколько областей окна браузера. 


СОВЕТ 


Некоторые браузеры поддерживают встроенные команды форматирования. Напри- 
мер, в Іпќегпеї Ехр!огег текст можно делать жирным, курсивом и подчеркивать с по- 
мощью комбинаций клавиш <Сї>+<В>, <Сій>+<[> и <СіП>+<0> соответственно. От- 
менить последнее редактирование в Еігеїох можно посредством комбинации клавиш 
<Сіг>+<2>. Все эти "горячие" клавиши можно использовать также в браузере Сһготе. 
Дополнительную информацию об этих командах редактирования и о том, как можно 
создать настраиваемую панель инструментов для их инициирования, см. в статье 
в двух частях от разработчиков браузера Орега: Һір://іпуигі.сот/һітіЕаії и 
ћіїр://іпуи!.сот/һітіЕайќ2. 


Обычно атрибут сопёепЕЕаіёар1Іе в разметку не включается. Вместо этого он вклю- 
чается с помощью Јауа$сгірі-кода и отключается по завершению редактирования. 
В следующем листинге приведены соответствующие функции: 


Ғопсёіоп зіагіЕаіё () { 
// Включаем редактирование элемента. 


уаг еІепепі = адоситепі .деёЕ1епепЕВута ("еаібаріеЕ1етмепі"); 


е1етепё .сопёепіЕаіёар1е = ігџое; 


Ғипсііоп зёорЕаііё () { 
// Отключаем редактирование элемента. 
уаг е1етерЕ = адоситепі . десЕ1етепеВуТа ("еаібаріеЕ1етмепі"); 


е1етепё.сопёепіЕаібар1е = Ёа1зе; 


// Выводим редактируемый текст в окне сообщения. 
а1егі ("Үоџг едііёеа сопёепі: " + е1емеп®.1ппехНТМТ,) ; 


} 
А для вызова этих функций используем соответствующие кнопки: 


<Баебоп опс1іск="ѕёбагіЕаі+ ()">5$агЕ Баі+іпад</робёоп> 
<Баебоп опс11ск="зборЕа1 () ">56ор Баіёіпа</роёбоп> 


Только смотрите — не поместите эти кнопки в редактируемую область страницы, 
т. к. при редактировании страницы ее элементы прекращают генерировать события, 
и ваш код не сможет запуститься. 


На рис. 4.17 показаны результаты применения этого кода — введена строка текста, 
в которой слово "ҮЕЅ" отформатировано жирным шрифтом посредством "горячих" 
клавиш <Сіті>+<В>. 
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Ө Еетепї Еаїйітд 


Є С © ЕетепїЕаїїіпо.һіті 
ЕаіғаЫе <іу> Ве1оъх: 


Үои сап ейі #15 їехі, і уоџ'ӣ НКе. 
ҮЕ$!! І го Еке. 


Зап Еайіпо) /5'ор Едита. 


С ауазспрЕ Мей 


Үоиг ед ед сопепё Уоц сап ейі 


ке, <Ыг> ёіпЬѕр; &пЬѕр;<6> ҮЕЅ!!</Ь> Гош ЙКе. 


{115 +ехі, # уоу'9 


Рис. 4.17. Как видно, редактирование содержимого элемента действительно изменяет 
хранящееся в памяти содержимое страницы. В примере новое содержимое просто показано 
в окне сообщений, но в настоящей странице эти данные были бы отправлены на веб-сервер, 

скорее всего, с помощью объекта ХМЬНЕЕрВесаез® 


ПРИМЕЧАНИЕ 


НТМЕ-редактирование работает по-разному на различных браузерах. Например, 
в браузере Сһготе нажатие комбинации клавиш <СН1>+<В> добавляет элемент <р>, а 
в браузере 1Е — элемент <ѕігопо>. Подобные расхождения происходят и при нажа- 
тии клавиши <Епїег> для добавления новой строки или клавиши <Васкѕрасе> для 


удаления тега. Поэтому логично станда 


ртизировать возможность НТМЕ-редак- 


тирования в НТМІ5, чтобы заставить разработчиков браузеров поддерживать одина- 


ковое редактирование. 


Редактирование страницы 


с помощью атрибута 4е/дпМоае 


Атрибут адеѕіспмоде похож на атрибут сопёепі 
зволяет редактировать всю веб-страницу. Это 


ЕаӢібар1е, с той разницей, что он по- 
может показаться слегка проблема- 


тичным, ведь при редактировании страницы отключаются события элементов. То- 
гда как мы сможем нажимать кнопки, чтобы управлять процессом редактирования? 
Решение этой проблемы простое — редактируемый документ помещается внутри 


элемента <1Ехаше>, который ведет себя, как 
(рис. 4.18). 


сверхмощное окно редактирования 


Разметка этой страницы до приятного проста. В следующем листинге приведено 


все содержимое элемента <роау> страницы. 


<Һ1>Еаібаріе Раде</һ1> 


<1Егаше іа="радеЕаіёог" згс="Ароса1урзеРаде Кеуіѕеа.һіт1"></іЁгате> 


<аіу> 


<роёёоп опс1іск="збагіЕаі+ () ">ѕбагі Баіёіпо</рибёоп> 
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<Баебоп опс11ск="$ЕорЕа1 () ">5Еор Баіёіпа</роёёоп> 
</аіу> 


<Һ1>Еаіёеа нНтмі</һ1> 
<аӢіу іа = "едӢіёеантмі"></діу> 


ПСС [5-52-88 
| О раде Еаїіпо [+] - 
«> | пелелнтміѕ/Сһаріег04/РадеЕайіпо,Һті а | - 5 

ЕаіёаЫе Раре 


һап іг Бееп ог ће ауегазе һитап Бета һгоцоһоиѓ а] оѓ 
гесогаеа һіѕїогу. 


ыы 


Ви доп сеї їоо 
тив. Тһеге'ѕ 5 
репу оѓ һоггійс 
мауѕ іє соша а! ға 
арагї. Іп {61$ агісе, 
уои Іеагп абоща 
{ему оЁ оџг ЁауогИез. 


Мауап Ооотѕӣау 
ЅЕеріс< <поссесі аў 


| іапЕайпо || Зюр Еайпо 


Еацеа НТМІ. 

|<агісіе> <Һеайег> <һргоир> <Һ1>Нох Һе Могіа Соша Епа</В1> <2>бсепагіоѕ Һа ^ 
'зреЙ Һе епа оѓ Не аз уе Кпоуг</2> </Һегоир> <р Чаз5="ВуНпе">Бу Кау М. 
|Сагпабоп</р> </Һеайег> <@х сЇаѕѕ="Сопіепі"> <р><ѕрап <1аз5="Геа ">12 
(похг</ѕрап>, уои'те ргођаЫу ѓЁееіпе ргейу роой. Айег аЦ, Ше іп ће ӣеуеіорей уота | 
15 сотќогіаЫе<ѕрап сЇаѕѕ="'ѕу1е1"> — </5рап>ргобаЫу тоге сотќогіаЫе вап 5 

'Бееп ог ће ауегаре Һатап Бел; һгоирћһоиі а ої гесогӣей Һѕіогу.</р> <Яриге 
'ав5="НоаЕариге"> <низ ѕгс="Һитпап 5КиЇјре" а="Ниглал ѕкиШ"> 

|<брсарбоп>МҮШ уои бе ће 1а5{ регѕоп ап те ії опе оЁ Пезе аросаіуріс ѕсепагіоѕ 
ріауѕ оч? </ЯвсарНоп> </беиге> <р>Виї оп ре! іоо тир. Тһеге'ѕ 5 ріепіу ої 
Һоггіћс уауѕ # соша а ѓа арагі. Іа 15 агісіе, уои Іеагп абоиѓ а {ег оРоиг 
МахотНез.</р> <Һ>Мауап Юоотѕӣау<Љ2> <р>5Керісѕ завез Пай ће Мауап 


= === кож. = 


Рис. 4.18. Эта страница содержит две области. Первая область создается элементом <і Ёгате> 
и содержит страницу примера об апокалипсисе из главы 2. А вторая область создана 
обычным элементом <аіу> и содержит НТМЁ-разметку страницы после редактирования. 
Управление редактированием осуществляется посредством двух кнопок вверху страницы, с помощью 
которых включается и выключается атрибут дӢеѕіспМоде окна элемента <і Ёгате> 


Видно, что, как и в предыдущем примере, в этом примере используются функции 
збагіЕаіё () И зЕорЕа1* (). Но их код несколько изменен, чтобы управлять атрибу- 
ТОМ дезідпМоде, а не сопіепіЕаіёар1е: 


Ғопсёіоп зіагіЕаіё () { 
// Включаем атрибут деѕідпмМоде элемента <іЁгапте>. 
уаг едііог = досипепі.деёЕ1епепіВута ("радеЕаіёог"); 
едӢібог.сопіепійіпаои . аосоитепі .деѕісдпмМоде = "оп"; 
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Ғипсііоп зёорЕаііё () { 
// Выключаем атрибут деѕідпмМоае элемента <іЁгапе>. 


уаг едііог = досопепі.деёЕ1епепіВутІа ("радеЕаіёог"); 
едііог.сопіепёйіпаои.дӢосотпепё .деѕзіспмМойе = "оЕЁ"; 


// Отображаем отредактированную разметку 

// (просто чтобы убедиться, что редактирование было выполнено). 

уаг һём1різѕр1Іау = аосимепе .чеЕЕ1етеп®ВуТа ("еаіёеантмі"); 

ћёем1ріѕр1ау.іехіСопіепі = еаіїбог. сопбепЕИМ1паом . їіоситепі .ройу.іппегнНтмі; 
} 


Этот пример должен дать вам представление о возможностях НТМГ-редакти- 
рования. Например, щелкните на изображении, чтобы выделить его для редактиро- 
вания. Теперь можно изменять размеры изображения, перетаскивать его на новое 
место или совсем удалить его. То же самое можно делать и с элементами управле- 
ния формы, если редактируемая страница содержит их. 


Конечно же, если вы хотите превратить этот пример во что-то практическое, то вам 
нужно будет серьезно доработать его. Прежде всего следует добавить другие 
элементы управления редактированием. Если вы хотите получше разобраться 
в модели команд, в этом вам опять помогут разработчики браузера Орега 
(см. ВИр://Япуи.сот/ВотТЕ и В@р:// туп. сот/В Е 912). Вторым делом 
нужно будет делать что-то полезное с отредактированной разметкой, например, 
отправить ее на сервер, используя объект хмЕнеервечиезе (см. разд. "Объект 
ХМІ.НірВедиеѕі" главы 11). 


Еще одно предостережение. Этот пример не будет запускаться с локального жест- 
кого диска на всех браузерах. Іпќегпеѓ Ехрогег и Сһготе заблокируют его по при- 
чинам безопасности, но на Еігеѓох не будет никаких проблем. Чтобы избежать воз- 
можных проблем, его можно запустить с сайта книги: у\\.ргозеесв.сот/й 5. 


ГЛАВА 5 


Аудио и видео 


Было время, когда Интернет использовался в основном для обмена данными науч- 
ных исследований. Потом было время перемен, и в мгновение ока Интернет стал 
одним из двигателей новостной индустрии и торговли. Еще несколько мгновений, и 
вот мы уже здесь, с Интернетом, использующим новейшие сетевые технологии для 
доставки на дом по всему миру невероятнейших объемов видеоинформации самого 
разного содержимого от трансляций с марсохода в режиме реального времени до 
дешевой комедии. 


Важность этого сдвига трудно переоценить. Проект, который в начале 2005 г. был 
на стадии "разве не было бы это замечательно", теперь реализовался в виде 
УочТие. Видеосюжеты продолжительностью в 3—4 минуты наводнили Интернет. 
И, как докладывает гигант сетевого оборудования и услуг С15со, эта тенденция не 
замедляется, и, согласно оценкам этой компании, к 2013 г. ошеломляющие 90% 
всего интернет-трафика будет составлять видео. 


Поразительно, это грандиозное изменение произошло несмотря на то, что НТМЕ и 
браузеры не обладают встроенной поддержкой видео и даже аудио. Вместо этого 
они полагаются на подключаемые модули, такие как Е1аѕћ, которые удовлетворяют 
надобности большинства пользователей в большинстве случаев. Но в этом НТМІ- 
видеопокрытии есть очевидные мертвые зоны, наподобие той, которую создал 1Рай 
компании Арре, не поддерживающий Е1аѕћ. 


Стандарт НТМІ5 пытается решить эти пробелы введением элементов <аџаііо> и 
<уіаео>, которых так не хватало в НТМІ все эти годы. Наконец, содержимое муль- 
тимедиа получило единообразную, стандартную поддержку, не требующую под- 
ключаемых модулей. Но не все в этой истории так гладко. Основные разработчики 
браузеров сцепились в битве аудио- и видеоформатов, которая намного грязнее, 
чем война форматов В№-Кау и Нр-рур. Печальным последствием этой битвы яв- 
ляется отсутствие единого аудио- и видеоформата, который бы работал на всех 
браузерах, и чтобы файлы мультимедиа можно было бы воспроизводить в НТМІ, 
их нужно кодировать по-разному для разных браузеров. В этой главе мы узнаем, 
как это делается. 
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Но сначала, давайте сделаем шаг назад и рассмотрим общую картину, чтобы уви- 
деть, в каком состоянии находилось воспроизведение видео перед тем, как за это 
взялся НТМГ5. 


Основные сведения о воспроизведении видео 
в современных программах 


Не прибегая к НТМГ5, видео в веб-страницу можно добавить двумя способами. 
Самый простой состоит в использовании элемента <епьед>. Потом браузер создаст 
видеоокно под проигрыватель М№іпаоуѕ МеФа Р1ауег, АррІе ОшскТите или какой- 
либо другой проигрыватель и разместит его на странице. 


Основная проблема с этим подходом заключается в том, что он полностью отдает 
разработчика на милость поддержки браузера. Разработчик не властен управлять 
воспроизведением, может не иметь возможности буферизировать видео, чтобы 
предотвратить задержки с воспроизведением, а также не знает, сможет ли данный 
видеофайл воспроизводиться в разных браузерах или операционных системах. 


Второй подход заключается в использовании подключаемого модуля браузера, на- 
подобие сравнительно недавнего новичка в этой области ЗПуеей корпорации 
М1сгозой или старожила Е1аѕһ от компании Айобе. До недавнего времени исполь- 
зование модуля ЕІаѕһ полностью решало задачу поддержки видеосодержимого 
браузерами. Ведь видеоформат Е1аѕһ работает всюду, где установлен модуль Е1аѕћ, 
что в настоящее время составляет свыше 90% подключенных к Интернету компью- 
теров. Технология НазВ также предоставляет почти неограниченный контроль над 
воспроизведением видео. Разработчик может, например, использовать готовый ви- 
деоплеер НазВ сторонней фирмы или создать собственный и индивидуально офор- 
мить каждую кнопку управления. 


Но подход с использованием Е1аѕћ также не идеальный. Чтобы вставить видео Е1аѕћ 
в веб-страницу, в нее нужно вставить определенный объем безобразной разметки, 
содержащей элементы <орјесё> И <епреа>. Кроме этого, видеофайлы для показа 
нужно закодировать в требуемый формат, а также может потребоваться приобрести 
дорогостоящий инструментарий Е1аѕћ-разработки и научиться пользоваться им, что 
может потребовать серьезных усилий. Но хуже всего это новая волна мобильных 
устройств компании Арр!е — 1Рвопе и 1Раа. Эти устройства органически не вос- 
принимают Е1аѕһ и выводят пустую рамку в том месте страницы, где вставлено это 
видео. 


ПРИМЕЧАНИЕ 


Модули расширения также имеют свойство временами сбоить. Причина кроется в 
принципе их работы. Например, при посещении страницы, на которой используется 
видео Еіаѕћ, браузер позволяет модулю НазН взять под контроль прямоугольную об- 
ласть где-нибудь на странице. В большинстве случаев этот подход работает нор- 
мально, но незначительные ошибки или нестандартные системные настройки могут 
вызвать неожиданные помехи и сбои, такие как, например, искаженное видео или по- 
требление веб-страницей огромных объемов памяти, в результате чего картинка на- 
чинает ползти, как улитка. 
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Тем не менее, если вы сегодня просматриваете видео в Интернете (но не с по- 
мощью 1РБопе или 1Раа), то, скорее всего, это видео обернуто в мини-приложение 
НазБ. Если вы не уверены, щелкните на видеоплеере правой кнопкой мыши. Если 
откроется меню с командой наподобие О программе Айође Наѕћ РІауег 10, тогда 
вы наверняка имеете дело с вездесущим модулем Еаѕһ. И даже при переходе на 
НТМІ5 разработчикам, скорее всего, понадобится резервное решение с использо- 
ванием ЕІаѕһ для браузеров-старожилов, которые остались в прошлом, таких как, 
например, Іпёегпеї Ехр/отег 8. 


ПРИМЕЧАНИЕ 


В 2010 г. сервис ҮоиТире ввел в действие НТМЁЕ-видеопроигрыватель на испыта- 
тельной основе. Попробовать этот проигрыватель можно, посетив страницу 
млмим/.уощибе.сот/йт15. Но во всех других случаях ҮоиТибе полагается исключи- 
тельно на НазП. 


Представляем видео и аудио НТМІ_5 


Поддержка видео и аудио НТМІ5 основана на простой идее. Точно так же, как 
с помощью элемента <1та> в веб-страницу можно вставлять изображения, в нее 
должно быть возможным вставить звук посредством элемента <аџаіо> и видео 
с помощью элемента <уіаео>. Вполне логично, НТМГ.5 позволяет вставлять оба эти 
типа мультимедиа. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Поворачивайте назад сейчас, если... 


К сожалению, некоторые аспекты воспроизведения мультимедиа находятся вне дося- 
гаемости новых аудио- и видеовозможностей НТМІ5. Для следующего содержимого 
и/или способов его воспроизведения нужно опять обращаться к Еіаѕћ (по крайней ме- 
ре, на данный момент). 


• Лицензированное содержимое. Видеофайлы НТМЕ5 не используют никакой сис- 
темы для защиты от копирования. По сути, народ может загружать НТМЕ5-видео 
с такой же легкостью, как и изображения — просто щелкнув правой кнопкой мыши 
по видео и выбрав опцию Сохранить. 


• Потоковое аудио или видео. В НТМЕ5 нет способа для передачи аудио или ви- 
део от одного компьютера к другому в потоковом режиме. Поэтому, разработчикам 
чат-программ, в которых посетители веб-страницы используют микрофон и/или 
веб-камеру, придется продолжать работать с НазВ. Разработчики НТМЕ5 экспери- 
ментируют с элементом <аеу1се>, который может предоставить эту возможность, 
но в настоящее время решения с использованием только НТМЕ5 нет ни для какого 
браузера. 


• Адаптивное потоковое видео. Для продвинутых веб-сайтов с большими объема- 
ми видеосодержимого, наподобие ҮоиТибе, требуется многоуровневое управление 
буферизацией и пересылкой видеопотока. Им нужно предоставлять видео в раз- 
ных разрешениях, видеособытий реального времени, а также настраивать качест- 
во видео под пропускную возможность интернет-подключения пользователя. До 
тех пор пока НТМІ5 не сможет предоставлять эти возможности, видеообменные 
сайты могут добавить поддержку НТМІ5 только как опцию, но полностью перехо- 
дить на него с Назй не будут. 
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• Высококачественное аудио с низкой задержкой. Некоторые приложения требу- 
ют начинать воспроизведение аудио без задержки или проигрывать несколько 
аудиоклипов с идеальной синхронизацией. В качестве примеров таких приложений 
можно назвать виртуальный синтезатор, музыкальный визуализатор или игру ре- 
ального времени с множеством накладывающихся звуковых эффектов. И в то вре- 
мя как разработчики браузеров усиленно работают над улучшением НТМІ5- 
аудиопроизводительности, оно еще не отвечает этим требованиям. 


• Динамическое создание или редактирование аудио. А если вам нужно не толь- 
ко воспроизводить записанное аудио, но также анализировать аудиоинформацию, 
модифицировать или создавать аудио — и все это в режиме реального времени? 
Новые стандарты, такие как Аи4ю Ва АРІ, разрабатываемые под спонсорством 
Ғігеѓох, состязаются в добавлении возможностей этого типа к НТМЕ5-аудио, но в 
настоящее время они еще не доступны. 


Воспроизведение аудио 
с помощью элемента <аиаіо> 


В следующем коде приведен простейший пример использования элемента <аџаіо>: 


<р>Неаг из госк оп м1ЕВ ооџг пем зопа, 
<сібе>реаёћ ёо Коррег Раск1ез</с1е>:</р> 
<аџӣіо згс=" гаБрегаасК1ез .шр3З" сопіго1ѕ></аџйіо> 


Атрибут зхс содержит имя аудиофайла для воспроизведения, а атрибут сопего1$ 
указывает браузеру, что нужно отобразить базовые элементы управления воспроиз- 
ведением. Своим внешним видом эти элементы управления слегка отличаются от 
браузера к браузеру, но все они имеют одинаковое назначение: разрешают пользо- 
вателю начинать и останавливать воспроизведение, переходить в другое место 
записи и регулировать громкость (рис. 5.1). 


ПРИМЕЧАНИЕ 


Элементы <аца1о> и <уійео> должны иметь как открывающий, так и закрывающий 
тег. Использование синтаксиса пустых элементов (например, <аџаіо/>) не допуска- 
ется. 


Кроме атрибута сопеко1з элемент <апа1о> поддерживает еще три атрибута: рге1оад, 
апокорТау И 1оор. Атрибут рге1оаа указывает браузеру способ загрузки аудиофайла. 
Значение апко этого атрибута указывает браузеру загружать аудиофайл полностью, 
чтобы он был доступен, когда пользователь нажмет кнопку воспроизведения. 
Конечно же, загрузка осуществляется в фоновом режиме, чтобы посетитель веб- 
страницы мог перемещаться по странице и просматривать ее, не дожидаясь завер- 
шения загрузки аудиофайла. 


Атрибут рхе1оаа может принимать два значения. Значение пекадафа указывает 
браузеру загрузить первую небольшую часть файла, достаточную, чтобы опреде- 
лить некоторые его основные характеристики (например, общий размер файла). 
Атрибут попе указывает браузеру не загружать аудиофайл автоматически. Эти 
опции можно использовать для того, чтобы сэкономить пропускную способность 
подключения, например, если страница содержит большое число элементов 
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<аџаіо>, НО ожидается, что пользователь будет проигрывать лишь некоторые 
ИЗ НИХ: 


<апа1о ѕгс="гиррегаџскіеѕ.тр3" сопёго1$ рге1оаа="теайаба"></аџаіо> 


Когда атрибуту рге1оаа задано значение попе ИЛИ пебада+а, загрузка аудиофайла 
начинается после того, как пользователь нажмет кнопку воспроизведения. 
К счастью, браузеры могут без проблем проигрывать одну часть аудиофайла, 
в то время как загружать другую, если только интернет-подключение не слишком 
медленное. 


Неаг 0$ госК ош уһ ог пех зопя. Дей іо Киђђеғ Рисііеѕ: 


> 0:00:00 В панаа (00:01 1$) иии 


Неаг 1$ тоск ош уі ош пеуу зопе, Пеаѓл ѓо Вирђеғ Рисійіеѕ: 


Неаг иѕ тоск ош уі ош пеуу зопя, Пеаѓл ѓо Кирђеғ Рисііеѕ: 


006 


Рис. 5.1. Так выглядят элементы управления воспроизведением в трех разных браузерах: 
Іпіегпеї ЕхрІогег (вверху), боодіе Сһготе (в центре) и Еігеѓох (внизу). Но чтобы создать страницу 
с аудио, которое может проигрываться на всех трех браузерах, потребуется немного поколдовать 
над аудиоформатами 


Если значение атрибута рге1оаа не установлено, то браузеры действуют по своему 
индивидуальному усмотрению. Большинство браузеров предполагает аџбо в каче- 
стве значения по умолчанию, но в Еігеѓох это пеёайаёа. Кроме этого, важно отме- 
тить, что атрибут рге1оаа не является обязательным для выполнения правилом, 
а рекомендацией браузеру желаемого действия, которую он может игнорировать в 
зависимости от других обстоятельств. А некоторые устаревшие браузеры вообще 
не обращают внимания на атрибут рге1оаа. 


ПРИМЕЧАНИЕ 


Если вставить в разметку несколько элементов <аца1о>, то браузер создаст отдель- 
ную полосу элементов управления воспроизведением для каждого из них. Посетитель 
веб-страницы может прослушивать аудио на одном из них или на всех сразу. 


Атрибут аџёор1ау указывает браузеру начать воспроизведение сразу же после за- 
вершения загрузки страницы: 


<аџаіо згс="гиррегаоскіеѕ.тр3" сопігоіз аџіёор1ау></аџаіо> 
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Если этот атрибут не используется, пользователь должен нажать кнопку запуска, 
чтобы начать воспроизведение. 


Элемент <аџдіо> можно использовать для того, чтобы проигрывать фоновую музы- 
ку или обеспечить звуковые эффекты в игре с браузерным интерфейсом. Для этого 
из него нужно убрать атрибут сопіго1ѕ и вставить атрибут апеор1ау (или же осуще- 
ствлять воспроизведения посредством кода Лауабсирь как рассматривается в 
разд. "Управление плеером посредством Јауа$сгірі" далее в этой главе). Но будьте 
осторожны в применении этого подхода и не забывайте, что для такой страницы 
все равно требуется какой-либо способ для прекращения воспроизведения. 


Внимание! 


Вряд ли кому понравится страница, с которой несется оглушительная музыка или зву- 
ковые эффекты, и нет возможности отключить звук. Если вы решите использовать 
элемент <аџоаіо> без атрибута сопЕго1з, то должны непременно добавить кнопку, 
которая посредством Уауа$спр{ отключает звук. 


Наконец, атрибут 1оор указывает браузеру повторять воспроизведение: 


<ай о згс="гиррегаоскіеѕ.тр3" сопёго1$ 1Іоор></аџііо> 


Воспроизведение в большинстве браузеров достаточно плавное, что позволяет соз- 
дать с помощью этого метода непрерывную повторяющуюся звуковую дорожку. 
Секрет состоит в том, чтобы использовать повторяемое аудио, с одинаковым нача- 
лом и окончанием. На сайте уууууу.Яа$ВКИ.сотЛоор$ можно найти сотни бесплат- 
ных образцов таких аудиофайлов. (Эти повторяющиеся аудиофайлы были изна- 
чально предназначены для использования с Е1аѕһ-плеерами, но также имеются 
в форматах МРЗ и МАУ.) 


Если элемент <аџаіо> выглядит так хорошо, что даже не верится, к сожалению, так 
оно и есть. В разд. "Войны форматов и резервные решения" далее в этой главе мы 
рассмотрим проблемы с аудиоформатами, которые ввергают НТМГ5-разработ- 
чиков в депрессию. Но сначала стоит познакомиться с близким родственником 
элемента <аџдіо> — элементом <уіадео>. 


Воспроизведения видео 
с помощью элемента <и/аео> 


С элементом <аџаіо> хорошо идет в паре элемент <у1аео>. Он применяет такие же 
атрибуты згрс, сопіго1з, аибор1Тау И 1Іоор. Пример использования этого элемента по- 
казан в следующем коде: 


<р>А риббегё1у Егом ту уасаїіоп іп Зміїгег1апа!</р> 
<уійео згс="БаеекЕ1у.пр4" сопіго1ѕ></уійео> 


Как и в случае с элементом <аџаіо>, атрибут сопігоїіѕ указывает браузеру создать 
набор элементов управления воспроизведением (рис. 5.2). В большинстве браузе- 
ров эти элементы скрываются при щелчке где-нибудь в области страницы и ото- 
бражаются опять при наведении курсора мыши на область видеоплеера. 
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Рис. 5.2. Проигрыватель элемента <у1Аео> можно легко принять за проигрыватель Риазп. 
Но если щелкнуть правой кнопкой мыши по проигрывателю, то откроется более простое контекстное 
меню, содержащее опцию сохранения видеофайла на жесткий диск локального компьютера. 
В зависимости от браузера, это контекстное меню также может содержать команды для изменения 
скорости воспроизведения, повтора, полноэкранного режима и выключения звука 


Кроме общих с элементом <аџаіо> атрибутов, элемент <уідео> имеет три своих соб- 
ственных атрибута: везарЕ, и1аеВ и розкег. 


Атрибуты һеісће И міаєһ устанавливают высоту и ширину окна воспроизведения 
в пикселах, соответственно. Следующий код показывает пример создания области 
воспроизведения размером 400х300 пикселов: 


<уідео згс="риёбегЁ1у.тр4" сопіго1ѕ міаёһ= "400" везаьЕ="300"></у1аео> 


Размеры окна воспроизведения должны совпадать с размером видео, но лучше явно 
указать их, чтобы оформление страницы не искажалось до того, как видеофайл за- 
грузится (или если видеофайл вовсе не загружается). 


Наконец, атрибут розёег позволяет указать изображение, которое можно использо- 
вать вместо видео: 


<уіаео згс="роібегЕ1у.тр4" сопіго1ѕ роѕіег="ѕміѕѕ а1рѕ.јро"></уідео> 


Браузеры показывают это изображение в трех ситуациях: когда первый кадр видео 
еще не загрузился, атрибуту ргеїоаа присвоено значение попе или указанный 
видеофайл отсутствует. 


Хотя на данном этапе мы рассмотрели все, относящееся к аудио- и видеоразметке, 
эти возможности можно значительно расширить с помощью стратегически разме- 
щенного кода ЈауаЅсгірі. Но прежде чем мы углубимся в изучение элементов 


Глава 5. Аудио и видео 181 


<аџаіо> И <уіаео>, нам нужно разобраться С проблемами поддержки аудио- и ви- 
деокодеков. 


ПРИМЕЧАНИЕ 


Элементы <аџаіо> и <у1аео> имеют еще два атрибута. Атрибут поатеа выключает 
звук сразу же при загрузке страницы. Пользователь может включить звук обратно 
с помощью элементов управления воспроизведением. А атрибут тедіадгоџр исполь- 
зуется для связки нескольких мультимедийных файлов, чтобы синхронизировать их 
воспроизведение. Эта возможность особенно полезна, когда звуковая дорожка видео 
находится в отдельном аудиофайле. Но в настоящее время браузеры не поддержи- 
вают ни один из этих атрибутов. 


Войны форматов и резервные решения 


В рассмотренных ранее примерах использовались два популярных стандарта: МРЗ 
для аудио и Н.264 для видео. Этого достаточно для Іпќегпеі ЕхрІогег и Ѕаїѓагі, но не 
для других браузеров (рис. 5.3). 


Неаг $ тоск оці ул ош пеуу зопе. Деаёй го КибБе’ Рисійеѕ: 


А БийегЯу Нош ту уасаноп іп Ѕулігегіапі! 


Рис. 5.3. Результаты попытки воспроизвести МРЗ-файл в Еігеѓох (вверху) 
и видеофайл в Іпїіегпеѓ Ехр!огег (внизу) 


По поводу войны мультимедийных форматов для НТМІ5 у веб-разработчиков 
имеется несколько сердитых вопросов. Таких как, действительно ли аудио и видео 
НТМЕ5 находятся в состоянии безнадежной конфронтации и на ком лежит главная 
вина за это? Но на эти вопросы нет ясных и однозначных ответов. У каждого раз- 
работчика браузеров есть свои оправдания и объяснения, каким стандартам муль- 
тимедиа отдать предпочтение. Небольшие разработчики (такие как Мо7Ша, созда- 
тели браузера Егеѓох) не желают платить непомерно высокую для них цену за ли- 
цензию на использование таких популярных стандартов, как МРЗ для аудио или 
Н.264 для видео. И их трудно винить за это, ведь они предоставляют свои продукты 
бесплатно. 
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У компаний покрупнее (таких как Місгоѕоћ или АррІе) имеются свои оправдания, 
почему надо избегать нелицензированных стандартов. Они жалуются, что качество 
работы этих стандартов будет ниже (в настоящее время они не поддерживают ап- 
паратное ускорение) и что они не так широко используются, как запатентованные 
стандарты, такие как, например, Н.264, который используется в камкордерах, про- 
игрывателях Вш-Кау и во многих других разных устройствах. Но самая большая 
проблема может состоять в том, что никто по-настоящему не уверен, что эти нели- 
цензированные стандарты не связаны с чьей-либо интеллектуальной собствен- 
ностью. Если такие связи имеются, используя эти стандарты, крупные компании, 
наподобие МісгоѕоЁ или Арр!е, делают себя уязвимыми к дорогостоящим искам за 
нарушение патентных прав, которые могут тянуться годами. 


ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Лицензирование стандарта Н.264 


Я использую стандарт Н.264 для своего видео. 
Должен ли я приобрести лицензию для этого? 


Если вы используете в своем продукте декодер Н.264 (например, вы разрабатываете 
браузер, который может воспроизводить видео в стандарте Н.264), то определенно 
должны приобрести лицензию. Но если вы предоставляете видео для воспроизведе- 
ния, то здесь не все так ясно и однозначно. 


Сначала хорошие новости. Если вы используете стандарт Н.264 для создания бес- 
платных видео, то вам никогда ничего ни за какую лицензию платить будет не нужно. 
Если вы создаете видео коммерческого направления, но которые в действительности 
не продаются (например, рекламный ролик или продвигаете себя в интервью), то 
здесь тоже платить ничего не нужно. 


Но если вы продаете на своем веб-сайте видеосодержимое в формате Н.264, вам, 
может быть, придется уплатить лицензионный сбор фирме МРЕС-ГА либо сейчас, либо 
в будущем. В настоящее время все зависит от количества подписчиков. Если их у вас 
меньше чем 100 тысяч, платить не нужно, но если от 100 до 250 тысяч, то вас попро- 
сят раскошелиться на $25 000 в год. Эта сумма может показаться не такой и значи- 
тельной для компании с таким количеством подписчиков, и она может быть ничтожной 
по сравнению с другими расходами, такими как, например, стоимость профессиональ- 
ных инструментов для кодирования. Но эти числа могут измениться при пересмотре 
условий лицензирования в 2016 г. Крупным компаниям, которые хотят получить хоро- 
шую прибыль в области интернет-видео, может быть, предпочтительнее использовать 
какой-либо открытый, нелицензионный стандарт наподобие ТПеога или \№МеБМ. 


Все юридические подробности по лицензированию стандарта Н.264 можно узнать на 
сайте млммм.тред!а.сот/тайт/ргодгат$/А\УС/РадезЛтиго.азрх. 


Знакомимся с форматами 


Официальный стандарт НТМГ5 не требует, чтобы браузеры поддерживали какой- 
либо конкретный аудио- или видеоформат. (Ранние версии стандарта содержали 
такую рекомендацию, но в результате интенсивного лоббирования она была удале- 
на.) Вследствие этого разработчики браузеров могут выбирать форматы, которые 
они хотят поддерживать, несмотря на то обстоятельство, что разные форматы орга- 
нически несовместимы друг с другом. Список и краткое описание основных фор- 
матов, используемых в настоящее время, приведен в табл. 5.1. 


Глава 5. Аудио и видео 183 


Таблица 5.1. Некоторые аудио- и видеостандарты, 
поддерживаемые НТМІ5-браузерами 


Расширение 


файла Тип МІМЕ 


Описание 


Самый популярный аудиоформат в мире. Но ацаӢіо/трз3 
стоимость лицензии делает его непрактичным 
для небольших разработчиков, наподобие 
Еігеѓох и Орега 


Одо Могбіѕ Открытый, бесплатный стандарт, предостав- аџцаіо/од9 
ляющий высококачественное сжатое аудио, 
сравнимое с МРЗ 


Первоначальный формат для сырого цифрового аџаіо/мау 
аудио. Не использует сжатие, поэтому файлы 
невероятно большого объема и непригодны для 
большинства интернет-приложений 


Промышленный стандарт для кодирования ви- уідео/тр4 
део, особенно при работе с видео высокой чет- 
кости. Применяется в бытовых устройствах (та- 
ких как проигрыватели и камкордеры Віџ-Вау), 
на видеообменных сайтах (таких как ҮоиТибе 

и Мітео) и в браузерных модулях расширения 
(таких как ЕІаѕћһ и 5і1мегіідһї) 


Одо Тһеога Открытый, бесплатный стандарт для видео, уідео/од9 
созданный разработчиками аудиостандарта 
Уогбіѕ. Побайтно, качество и производитель- 
ность ниже стандарта Н.264, но достаточно вы- 
сокие, чтобы удовлетворить потребности боль- 
шинства пользователей 


Новейший бесплатный видеоформат, создан- уідӢео/терт 
ный Соодјіе на основе приобретенного ими “МР8. 
Критики доказывают, что его качество еще не на 
уровне видео Н.264 и он может содержать скры- 
тые связи с другими патентами, что может вы- 
звать лавину судебных исков в будущем. Тем не 
менее, М№МетМ является наилучшим выбором 
для будущего открытого видео 


В табл. 5.1 также указаны рекомендуемые расширения файлов для мультимедиа. 
Чтобы осознать, почему это важно, нужно понимать, что для создания видеофайла 
в действительности применяются три разных стандарта. Первым, наиболее очевид- 
ным, стандартом является видеокодек, применяемый для сжатия видео в поток дан- 
ных. В качестве примера можно назвать такие кодеки, как Н.264, ТВеога и \\е М. 
Вторым является аудиокодек, который применяется для сжатия одной или несколь- 
ких аудиодорожек. Например, для видео в формате Н.264 обычно используется 
звук в формате МРЗ, а для видео Тһеога — звук Уог1з. Наконец, формат контей- 
нера применяется для упаковки видео и аудио вместе с описательной информацией 
и, необязательно, другими безделушками типа изображений и субтитров. Часто 
расширение файла обозначает формат контейнера, т. е. расширение тр4 означает 
контейнер типа МРЕС-4, расширение ору — контейнер Ос ит. п. 
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Но не все так просто, т. к. формат контейнера поддерживает несколько разных 
аудио- и видеостандартов. Например, популярный контейнер МаќгоѕКа (тку) может 
содержать видео в формате Н.264 или Тћеога. Чтобы не усложнять этот вопрос из- 
лишними подробностями, в табл. 5.1 каждый видеоформат соотнесен с наиболее 
употребляемым для его упаковки контейнером, для которого также обеспечивается 
наиболее высокий уровень поддержки для Интернета. 


В табл. 5.1 также указан требуемый тип М МЕ, который нужно установить в на- 
стройках вашего веб-сервера. Если не указать правильный тип ММЕ, браузеры 
могут заупрямиться с воспроизведением вполне качественного мультимедийного 
файла. (Если вы не знаете, что такое типы МІМЕ и как их настраивать, см. врезку 
"На профессиональном уровне. Основные сведения о МІМЕ-типах" далее в этой 
главе.) 


Поддержка браузерами форматов мультимедиа 


Все аудио- и видеоформаты в мире будут вам бесполезны, если вы не знаете, как 
они поддерживаются разными браузерами. Разобраться в этом вопросе вам помогут 
табл. 5.2, в которой показана поддержка основными браузерами аудиоформатов, и 
табл. 5.3 — видеоформатов. 


Таблица 5.2. Поддержка браузерами аудиоформатов НТМІ 5 


Ргеюх Апагоіа 


МРЗ 


099 
УогЫіѕ 


ҮАУ 


Апагоіа 


Н.264 


099 
Тһеога 


Ү/еБм 


* В настоящее время браузер Сһготе поддерживает этот стандарт, но разработчики обязались 
удалить эту поддержку в будущих версиях с целью лучшего продвижения стандарта \УеБМ. 


** Операционная система ЮЗ 3.х поддерживает видео, но браузер Заїѓагі содержит несколько 
неочевидных ошибок обработки видео. Например, он отказывается проигрывать видео с установ- 
ленным атрибутом розеег (см. разд. "Воспроизведение видео с помощью элемента <иійео>" 
ранее в этой главе). 


*** |пќегпеї ЕхрІогег поддерживает формат \\ебМ, но при условии, что пользователь установит 
требуемый кодек. 


Глава 5. Аудио и видео 185 


Поддержка этих форматов мобильными браузерами представляет особый вид про- 
блем. Прежде всего, это нерегулярность работы. Некоторые функции, такие как 
автоматическое воспроизведение и повтор, могут не поддерживаться, а некоторые 
устройства могут воспроизводить видео только в специализированном проигрыва- 
теле, а не прямо в окне на веб-странице. А еще видео для мобильных устройств 
обычно нужно кодировать с кадром меньшего размера и худшего качества. 


СОВЕТ 


Если вы хотите, чтобы видео проигрывалось на мобильных устройствах, примите за 
правило кодировать его в формате Н.264 Ваѕеііпе РгойЕ (а не в формате Нідћ Ргойіе). 
Для телефонов !Рпопе и под управлением операционной системы Апагоіа следует ис- 
пользовать размер 640х480, а для ВіІаскВеггу — 480х360. Многие программы кодиро- 
вания (см. врезку "На профессиональном уровне. Кодирование файлов мультимедиа" 
далее в этой главе) имеют предварительные настройки, с помощью которых можно 
создать видео, оптимизированное для мобильных устройств. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 

Основные сведения о МІМЕ-типах 

МІМЕ-тип (также иногда называется типом содержимого) — это единица информа- 
ции, которая идентифицирует тип содержимого веб-ресурса. Например, МІМЕ-тип веб- 
страницы — ёехі/ћіт1. 


Перед тем как отправлять ресурс браузеру, веб-сервер отправляет ему ММЕ-тип это- 
го ресурса. Например, если браузер запросил страницу Зирег\ЛаеоР!ауегРаде. пит, 
веб-сервер сначала отправляет ему ММЕ-тип ёехі/ћім1, несколько других блоков 
информации, а потом собственно содержимое файла. ММЕ-тип указывает браузеру, 
как ему обрабатывать следующее за ним содержимое. Таким образом, браузеру не 
нужно определять тип содержимого по расширению файла или каким-либо другим ха- 
рактеристикам. 


Заботиться о ММЕ-типе распространенных типов файлов, например НТМІ -страниц и 
изображений, нет необходимости, т. к. все веб-серверы предоставляют такие файлы 
должным образом. Но в настройках некоторых веб-серверов МІМЕ-типы для аудио и 
видео могут быть не указаны. Это будет проблемой, т. к. получив от сервера мульти- 
медийный файл с неправильным ММЕ-типом, браузер будет сбит с толку и, скорее 
всего, откажется воспроизводить файл вообще. 


Во избежание этой проблемы необходимо установить в настройках веб-сервера 
МІМЕ-типы, перечисленные в табл. 5.1, и использовать соответствующие расширения 
для предоставляемых аудио- и видеофайлов. (Бессмысленно устанавливать требуе- 
мые ММЕ-типы, а потом использовать неправильные расширения файлов, т. к. веб- 
сервер должен сопоставить их вместе. Например, если настроить веб-сервер на ис- 
пользование М!МЕ-типа уідео/тр4 с тр4-файлами, а потом присвоить видеофайлам 
расширение трРочг, веб-сервер не будет иметь ни малейшего понятия, что вы от него 
хотите.) 


Настройка МІМЕ-типов не представляет никакой сложности, но точные действия зави- 
сят от конкретного веб-хостинга (или программного обеспечения для веб-сервера, ес- 
ли у вас собственный хостинг). Многие веб-хостинги используют популярную панель 
интерфейса сРапе!. Если ваша хостинговая компания тоже использует эту панель, 
найдите и щелкните по значку МІМЕ Туреѕ. Откроется страница, наподобие показан- 
ной на рис. 5.4, на которой можно установить требуемые параметры. Если вы сомне- 
ваетесь в своих способностях выполнить эту задачу, обратитесь за помощью к персо- 
налу своей хостинговой компании. 
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теи Е 
СР сРапе! Х [+] ч 
< [ЕРШ һнрхл/зуепдег.һамкһох.сот:2083/#топќепд/х3/тіте/тіте,Һті МЕ 8: 
рая - | 
МІМЕ Туре: \ео/тр4 ө 
Ехїепѕіоп(ѕ): тр4 © 
Тїр: зерагайе тире ехіепѕіоп іуреѕ мї а ѕрасе 
Ааа 
Узег Оейпей МІМЕ Туреѕ 
МІМЕ ТурЕ ЕХТЕМЗТОМ(5) КЕМОМЕ 
уідео/тр4 тра 0 
Ѕуѕїет МІМЕ Туреѕ 
МІМЕ ТУРЕ ЕхтЕМ5ІОМ(5) 

арріісаіоп/апӣгем-іпѕеї ег 

арріісабоп/аррііхмаге ам 

арріісаіоп/аїот+хті аіот 

арріісайоп/аёќотсаё+хті аіотсаё 

арріісайоп/аѓогтѕус+хті аотзус 

арріісаіоп/ссхті+хті ссхті 

арріісайоп/сді сді 

арріісайоп/си-ѕеете си - 


Рис. 5.4. Добавление МІМЕ-типа для поддержки видеофайлов Н.264. Во многих случаях веб-сайт будет 
уже настроен должным образом, и вам не нужно будет самому выполнять эти настройки 


Множество форматов: 
как понравиться всем браузерам 


Что делать бедному веб-разработчику со всеми этими форматами? Горькая правда 
состоит в том, что ни один аудио- или видеоформат не будет работать на всех брау- 
зерах. Если вы хотите поддерживать все браузеры, а поддерживать их все вы долж- 
ны, вам нужно запастись мультимедийными файлами в нескольких форматах. Кро- 
ме этого, вам, скорее всего, нужно будет организовать резервное решение Еаѕћ для 
посетителей, которые пользуются браузерами, не признающими НТМГ5, такими 
как, например, ГЕ 8. 


К счастью, элементы <аџадіо> И <уідео> поддерживают достаточно хорошую систе- 
му предоставления резервных решений, которая была хорошо отлажена новатора- 
ми веб-технологий. Но, к сожалению, война форматов означает, что содержимое 
нужно будет кодировать, по крайней мере, дважды, что является затратным про- 
цессом по времени, процессорным ресурсам и дисковому пространству. 


Но прежде чем приступать к работе, нужно определиться со стратегией поддержки 
браузеров, которые не признают НТМГ5. По большому счету, веб-разработчики 
имеют на выбор два хороших пути. 


О Использовать Еаѕһ в качестве основного решения, а НТМГ.5-решение — 
в качестве резервного. Таким образом, все посетители вашего сайта смогут ис- 
пользовать Еаѕћ, за исключением тех, на чьих браузерах этот модуль не уста- 
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новлен. Эта стратегия имеет смысл, если вы уже предоставляете на своем сайте 
видеосодержимое посредством Е1аѕһ, но хотите еще привлечь пользователей 
1Раа и 1Рһопе. 


О Использовать НТМІ5 в качестве основного решения, а Еаѕһ-решение — 
в качестве резервного. Таким образом, все посетители получают НТМГ5-видео 
и/или аудио, за исключением тех, кто использует старые браузеры, которые по- 
лучают Е1Іаѕһћ-содержимое. Если вы пойдете этим путем, можно также поддер- 
живать меньшее число форматов НТМІ5. В таком случае посетители, чьи брау- 
зеры хотя и поддерживают НТМГ5-мультимедиа, но не поддерживают предос- 
тавляемые вами форматы, также получат Еаѕһ-содержимое. Так как будущее за 
этим подходом, то он является предпочтительным при условии, что текущие ог- 
раничения НТМТ.5 видео и аудио (см. врезку "На профессиональном уровне. По- 
ворачивайте назад сейчас, если..." ранее в этой главе) — вам не помеха. 


В следующих разделах мы будем воплощать второй подход в жизнь. Таким обра- 
зом, мы обеспечим для браузеров чисто НТМГ.5-решение во всех случаях, когда это 
возможно. 


Элемент <ѕоигсе> 


Первым шагом в обеспечении поддержки нескольких форматов будет удаление ат- 
рибута згс из элемента <уідео> ИЛИ <аџдіо> и замена его вложенным списком эле- 
ментов <ѕоџгсе>. Например: 


<аџаіо сопіго1ізѕ> 


<зойгсе згс="гиррегаоскіеѕ.тр3" ёбуре="ацџаіо/тр3"> 


<зойгсе згс="гиррегаоскіеѕ.одд" ёбуре="аџаіо/одд"> 
</аџаіо> 


В данном случае элемент <аџаіо> содержит два элемента <ѕоогсе>, каждый из кото- 
рых указывает на отдельный аудиофайл. Из указанных файлов браузер выбирает 
первый, формат которого он поддерживает. В частности, ЕпеюЮх и Орега 
возьмут файл габЪег4исК1ез.0, а Іоќетпеї Ехр]огег, Зап и Сһготе — файл 
гиббегаџскіеѕ.трз. 


Теоретически, браузер может определить, поддерживает он или нет конкретный 
файл, загрузив и исследовав небольшую его часть. Но лучшим подходом будет ис- 
пользовать атрибут +уре, чтобы предоставить правильный МІМЕ-тип (см. врезку 
"На профессиональном уровне. Основные сведения о МІМЕ-типах" ранее в этой 
главе). Таким образом, браузер попытается загрузить только тот файл, который он, 
как считает, может воспроизвести. (Чтобы определить правильный МІМЕ-тип, 
см. информацию в табл. 5.1.) 


Этот же метод применяется и для элемента <уіаео>. В следующем листинге показан 
пример указания видеосодержимого в двух разных форматах — Н.264 и Тћеога: 


<уідӢео сопіго1ѕ міаёћ= "700" Һеідһі="400"> 
<ѕоцџгсе згс="реасһ.тр4" ёуре="уідӢео/тр4"> 
<зойгсе згс="реасһ.оду" ёуре="уідӢео/одд"> 
</уіаео> 
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В этом примере следует отметить одну новую особенность. При использовании 
разных видеоформатов файл в формате Н.264 всегда должен быть в списке первым. 
В противном случае он не будет проигрываться на старых устройствах 1Ра4 под 
управлением 105 3.х. (Эта проблема была решена в операционной системе 10$ 4, но 
размещение файла Н.264 вверху списка ничем ничему не вредит.) 


ПРИМЕЧАНИЕ 


Само обстоятельство, что браузер считает, будто он поддерживает определенный тип 
аудио или видео, не обязательно означает, что он может воспроизводить его. Напри- 
мер, файл может быть закодирован с сумасшедшей частотой дискретизации или 
с применением неизвестного кодека, но упакован в контейнер знакомого браузеру 
формата. Подобные проблемы можно решить, предоставив информацию о типе со- 
держимого и кодеке в атрибуте уре, но это внесет беспорядок в разметку. 


Так сколько же видеоформатов следует использовать? Чтобы прикрыть все тылы, 
необходимо использовать форматы Н.264 и Тһеога для основного решения НТМГ.5 
и Назр для резервного (которое рассматривается в следующем разделе). Для луч- 
шего качества видео формат ТВеога можно заменить форматом №еБМ. Этот формат 
не будет работать на более старых версиях Епеох или Орега, но они не очень рас- 
пространены в любом случае. Или же можно совсем разойтись и включить все три 
версии своего видео — Н.264, Тһеога и МБМ в указанном порядке. Версия Уве БМ 
идет перед версией Тһеога для того, чтобы браузеры, которые поддерживают оба 
эти формата, выбрали видео лучшего качества. 


Ну а если гулять по полной программе, то можно создать одну веб-страницу 
с видео как для настольных компьютеров, так и для мобильных устройств. В таком 
случае нужно не только предоставить файлы в формате Н.264 и Тћеога, но также 
создать версии видеофайлов меньшего объема, более подходящие для менее мощ- 
ных мобильных устройств и интернет-подключений с меньшей пропускной спо- 
собностью. Чтобы обеспечить получение мобильными устройствами менее объе- 
мистых файлов, а настольными — файлов лучшего качества, нужно использовать 
технологию запросов о возможностях воспроизведения устройства (тефа 
иепез), как рассматривается во врезке "Малоизвестная или недооцененная воз- 
можность. Запросы о возможностях воспроизведения видео" главы 8. 


Резервное решение Еіаѕћ 


Испокон веков все браузеры обрабатывают нераспознаваемые теги одинаково — 
игнорируют их. Например, если Пиегпеё ЕхрІогег 8 встречается открывающий тег 
элемента <уіаео>, он с ветерком проносится мимо него, не затрудняясь ознакомить- 
ся с атрибутом згс и другими параметрами этого элемента. Но при всем этом, брау- 
зеры не игнорируют содержимое внутри неизвестного им элемента, что является 
важной особенностью. Это означает, что в случае следующей разметки: 


<у1аео сопіго1ѕ міаёћ= "400" Һеідһі="300"> 
<ѕоцџгсе згс="аізсоРагіу.тр4" ёуре="уідео/тр4"> 
<ѕоцџгсе ѕгс="аізсоРагіу.оду" ёуре="уідео/одд"> 
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<р>йе 1іке йіѕсо Чапс1па.</р> 
</уідео> 


браузеры, которые не понимают НТМГ5, ведут себя, как будто бы они видели вот 
эту разметку: 


<р>Ме 11ке аізсо дапсіпа.</р> 


Эта особенность и лежит в основе бесшовного предоставления резервного решения 
для старых браузеров. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Кодирование файлов мультимедиа 


Итак, вы уже знаете, какие комбинации форматов использовать, но не обязательно 
осведомлены, как преобразовать свои мультимедийные файлы в эти форматы. Не 
следует впадать из-за этого в отчаяние, т. к. существует множество инструментов для 
решения этой задачи. Некоторые обрабатывают сразу несколько файлов в пакете, 
другие имеют репутацию предоставления результатов профессионального качества 
(и соответствующую цену), а третьи работают на мощных веб-серверах, предоставляя 
немедленные результаты. Задача состоит в том, чтобы разобраться со всем этим 
разнообразием и выбрать кодировщик, отвечающий вашим требованиям и возможно- 
стям. Далее приводится список и краткое описание некоторых кодировщиков. 


• Аудиоредакторы. Для преобразования файлов МАУ в формат МРЗ или \огбіѕ 
можно воспользоваться каким-либо базовым аудиоредактором. Аидасйу — один из 
таких редакторов для Мас и М/іпаомѕ, можно скачать бесплатно по адресу 
ћїр://аџдасіїу.ѕоигсеѓогде.пеї. Но для поддержки этим редактором МРЗ также 
нужно установить кодировщик ГАМЕ МРЗ, который можно загрузить по адресу 
ћїр:/Лате.бриапг2о.сот.аг. Редактор Соіамахе (мимим.до!Амгауе.сот) предоставля- 
ет подобные возможности. Попробовать этот редактор можно бесплатно, а приоб- 
рести за номинальную плату. 


• Міго Маео Сопуецег. Бесплатный редактор с открытым кодом для \Міпаомѕ и Мас 
О$ Х. Преобразует видеофайлы практически любого формата в формат \№МеБМ, 
Треога или Н.264. Также имеет предустановленные настройки размеров экрана 
и поддерживаемых форматов для мобильных устройств, таких как іРаа, іРһопе и 
телефоны Апагоіа. Общим недостатком является отсутствие возможности тонкой 
настройки более продвинутых функций для управления процессом кодирования. 
Загрузить редактор можно по адресу мммим.тиомеосопуецег.сот. 


• Еігеѓодд. Этот модуль расширения для Еігеїох может создавать видеофайлы 
Тһеога и \\МеБМ, предоставляя больше опций, чем Міго \М4ео Сопуекег. Работает 
непосредственно в браузере, но вся работа выполняется локально без обращения 
к веб-серверу. Установить редактор можно по адресу ИЧр://Ягеодд.огд. 


• НапаВгаКе. Эта многоплатформная программа с открытым исходным кодом пре- 
образует широкий диапазон видеоформатов в формат Н.264, а также пару других 
современных форматов. Доступна по адресу ћір://һапаргаке.їг. 


• 2епсо4ег. Профессиональный сервис для кодирования мультимедиа, который 
можно интегрировать в свой веб-сайт. Редактор загружает видеофайлы с веб- 
сервера, кодирует их в требуемый формат и с указанной частотой дискретизации 
присваивает им указанные названия, а затем размещает их в требуемом месте. 
Крупному сайту, такому как, например, сайт для обмена видеофайлами, пришлось 
бы платить этому сервису порядочный месячный сбор. Адрес сервиса — 
ћіїр://гепсодег.сот. 
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ПРИМЕЧАНИЕ 


Браузеры, поддерживающие НТМІ5-аудио, игнорируют резервное решение, даже 
если они не могут проигрывать основной файл. Например, когда Еігеѓох сталкивается 
с элементом <у1аео>, который содержит только файл формата Н.264, но без альтер- 
нативного файла формата Тһеога, он выводит окно видеопроигрывателя, в котором 
отображается значок крестика (см. рис. 5.3), но не показывает резервное содержимое. 


Теперь, после того как мы научились вставлять резервное содержимое, надо ре- 
шить, какое именно содержимое вставлять. Одним из примеров плохого резервного 
содержимого будет текстовое сообщение, наподобие "Ваш браузер не поддержива- 
ет НТМІ5-видео, поэтому вам нужно обновить его". Посетители веб-сайтов счита- 
ют сообщения такого типа крайне невежливыми и, скорее всего, не возвратятся на 
сайт, приветствующий их таким образом. 


Правильный подход — это включить в качестве резервного содержимого другое 
работоспособное видеоокно, иными словами, любое содержимое, которое бы ис- 
пользовалось на обычной видеостранице, т. е. странице без поддержки НТТР5. 
Одной из возможностей будет окно УоиТибе. При использовании этого подхода 
нужно следовать правилам УойТГибе — протяженность видео должна быть меньше 
15 минут и в нем не должно быть оскорбительного содержимого или содержимого, 
защищенного авторским правом. Видеофайл в лучшем формате загружается на 
УочТофе, где он кодируется в форматы, поддерживаемые этим сервисом. Для реа- 
лизации этого подхода перейдите на страницу 

Һер://арІоаа.уоџќире.сот/ту _уійеоѕ_иріоаа. 


Другим подходом будет использовать видеопроигрыватель Е1аѕћ (или аудиопроиг- 
рыватель Е1аѕһ для аудио). К счастью, в Интернете существует масса видеопроиг- 
рывателей Е1аѕһ, многие из которых бесплатные, по крайней мере, для некоммерче- 
ского использования. И большинство из них поддерживает формат Н.264, который 
вы уже, наверное, используете для НТМГ5-видео. 


В следующем листинге приведен пример использования в качестве резервного 
решения в элементе <у1аео> проигрывателя Е1о\’р1ауег (һќр:/Поуріауег.ого): 


<уіадӢео сопіго1ѕ міаёћ= "700" Һеідһі="400"> 
<ѕоцгсе згс="реасһ.тр4" ёуре="уідӢео/тр4"> 
<ѕоцџгсе згс="реасһ.оду" ёуре="уідӢео/одд"> 


<орјесё 1а="Е1омр1ауег" міаёһ= "700" һеідһі="400" 
Чафа="Е1омр1ауег-3.2.7.змЕ" 
Еуре="арр1ісаёіоп/х-зһоскимауе-#1аѕһ"> 


<рагат паме="тоуіе" уа1ае="Е1омр1ауег-3.2.7.змЕ"> 
<рагат паме="#1азһуагѕ" уа1ае='сопЕ19={"с11р" :"БеасВ .шр4" } '> 
</орјесї> 
</улаео> 


Жирным шрифтом в третьей снизу строке кода выделено имя файла, который брау- 
зер передает в качестве параметра видеопроигрывателю Е1о\ур1ауег. Хотя для этого 
примера возможны три результата — НТМЕ5-видео с Н.264, НТМГ5$-видео 
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Рис. 5.5. Одно и то же видео отображено тремя разными способами: в {егпе{ Ехр/огег 9 (вверху), 
в Рігеѓох (в центре) и в Іпіегпеї Ехрюгег 7 (внизу) 
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с ТБеога или Е1аѕһ-видео с Н.264, для него требуются только два видеофайла, что 
позволяет сэкономить на работе по кодированию. Результаты исполнения примера 
показаны на рис. 5.5. 


СовеТ 


Хотя использование файла Н.264 с Раз и удобно, этот подход не совсем идеальный. 
Поддержка этого формата была введена только в версии Еіаѕћһ 9.0.115.0. Браузеры, 
на которых установлен более старый модуль Раз, не смогут проигрывать видеофайл 
в формате Н.264 без обновления. Можно было бы использовать формат НазН \Маео 
Ғогтаї (Пу), который будет гарантированно работать на всех версиях модуля НазН, но 
для этого потребуется выполнять еще один заход перекодировки. 


Но опять же вероятна ситуация, что некоторые посетители вашего веб-сайта поль- 
зуются браузером, на котором не установлен модуль Е1аѕћ и который не поддержи- 
вает НТМІ 5. Для таких пользователей можно реализовать еще одно резервное ре- 
шение, например, в виде ссылки для загрузки видеофайла, который потом можно 
будет просмотреть в соответствующем проигрывателе. Это резервное решение 
вставляется после решения Е1аѕћ, но все еще внутри элемента <орјесё> следующим 
образом: 


<у1аео сопіго1ѕ міаёћ= "700" Һеідһі="400"> 
<ѕоцгсе згс="реасһ.тр4" ёуре="уідӢео/тр4"> 
<ѕоцгсе згс="реасһ.оду" ёуре="уіаӢео/одд"> 


<орјесё 1а="Е1омр1ауег" міаёһ= "700" һеідһі="400" 
ааба= "Һр: //хе1еазез .ЁЕ1омр1ауег.ога/змЕ/Е1омр1ауег-3.2.7.змЁ" 
Еуре="арр1ісаёіоп/х-зһоскимауе-#1аѕһ"> 


<рагат паме="тоуіе" уа1ае="реасВ .пр4"> 


<іта зкс="Беаср ЕҺотрпаі1.јро" а1+="А 1а2у дау аё ће реасһ"> 
<р>Үоџг Бгомзег 4оез поё ѕџиррогі НТМІ5 уійео ог Е1аѕһ.</р> 
<р>Үои сап йомп1оаа ће уійео іп <а Һгеғ="реасһ .пр4">МР4 Н.264</а> 
ог <а Һгеғ="Беасһ.осу">Одд ТһҺеога</а> Ғогта+.</р> 
</орјесї> 
</уіаео> 


Если же требуется, наоборот, реализовать основное решение в виде Е]аѕћ, а резерв- 
ное — в виде НТМІ, нужно просто переставить строки из предыдущего примера. 
Начинаем с элемента <орјес+>, в который вставляем элемент <уідео> непосредст- 
венно перед закрытием тега </орјесё>. А содержимое самого последнего резервно- 
го решения вставляется после последнего элемента <ѕоџгсе>: 


<орјесё 149="Е1омр1ауег" міаёһ= "700" һеісһі="400" 
ааёа="Һіір: //ге1еаѕеѕ. Е1омр1ауег.ога/змЕ/Е1омр1ауег-3.2.7.змЕ" 
Еуре="арр1ісаёіоп/х-зћоскмауе-#1аѕһ"> 


<рагат пате="поуіе" уа1ае="раекЕТу.прА"> 


<у1аео сопіго1ѕ міаёћ="700" Һеідһё="400"> 
<ѕоџгсе ѕгс="реасһ.тр4" ёуре="уіаео/тр4"> 
<зоигсе ѕгс="реасһ.оду" ёуре="уіаео/одд"> 
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<іто зэгс="реасһ Еһотрпаі1.јро" аї&="А 1ағу Чау аё һе реасһ"> 
<р>Уопг Бгомзег Ӣоеѕ поі ѕиррогі НТМІ5 улаео ог Е1Іаѕһ.</р> 
<р>Уой сап йомп1оаа іће улаео іп <а һгеғ="реасһ .пр4">МРА Н.264</а> 
ог <а һгеЁ="реасһ.оду">Одад Тһеога</а> Еогта®.</р> 
</уіаео> 
</орјесё> 


Обычно этот подход следует применять только в том случае, если нужно расши- 
рить существующий веб-сайт на основе Е1аѕћ для поддержки устройств Арре, та- 
ких как 1Раа. Кстати, существует по крайней мере один проигрыватель на Лауабспре 
со встроенной возможностью резервного решения НТМГ5. Называется он ЛМ 
РІаует, а загрузить его можно по адресу ум. ЛопзбаПу@ео.сот/рауег$/}м- 
Пу-рауег. 


Управление плеером 
посредством Јауа$сгірі 


На данный момент мы изучили довольно сложный материал. Мы теперь знаем, как 
с помощью элементов <аџдіо> и <уідео> создать решение с достаточно удовлетво- 
рительным уровнем браузерной поддержки, которое работает на большем количе- 
стве браузеров, чем сегодняшние решения на основе Е1аѕћ. Совсем неплохо для не- 
обкатанной новой технологии! 


Используя только НТМГ-разметку, это, пожалуй, все, что можно выжать из эле- 
ментов <аџдіо> И <уіадео>. Но для обоих элементов существует обширная объектная 
модель ЛауаЗспирь посредством которой можно управлять воспроизведением с по- 
мощью сценариев. Более того, используя этот подход, можно даже настроить неко- 
торые детали, такие как, например, скорость воспроизведения, что невозможно со 
стандартными аудио- и видеопроигрывателями. 


В следующих разделах мы изучим поддержку Јауа$сгірі, рассмотрев два практиче- 
ских примера. Прежде всего, мы добавим звуковые эффекты в игру, а потом созда- 
дим специализированный видеопроигрыватель. В завершение мы рассмотрим ре- 
шения, созданные другими разработчиками с использованием мощной смеси 
НТМЕ$ и ЈауаЅстірї, включая высокопроизводительные проигрыватели со скинами 
и редактируемыми субтитрами. 


Добавление звуковых эффектов 


Элемент <аџаіо> предоставляет более обширные возможности, чем простое проиг- 
рывание песен и других звукозаписей посетителями веб-страницы. С его помощью 
можно также проигрывать звуковые эффекты в любое требуемое время. Эта воз- 
можность делает его особенно полезным в тех случаях, когда к игре требуется до- 
бавить музыку и звуковые эффекты. 


На рис. 5.6 показана простая игра, которую можно усовершенствовать с помощью 
подобной возможности. 
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Рис. 5.6. На этой веб-странице выполняется простая анимация, состоящая из стилизованных мячиков, 
отскакивающих от нижнего и боковых краев рамки (пола и стен). Посетитель может добавить 
новый мячик, щелкнув кнопкой мыши по полю игры, или, щелкнув по мячику, 
направить его в другом направлении 


Полностью код примера рассматривается в главе б при обсуждении элемента 
<сапуаз>. На данном же этапе мы только рассмотрим, как реализовать соответст- 
вующий звуковой фон для этой анимации. 


В этом примере сочетаются звуковая дорожка фонового сопровождения и звуковые 
эффекты. Реализация фонового сопровождения — это самая легкая часть стоящей 
перед нами задачи. Первым делом вставляем в разметку невидимый элемент 


<апа1о>: 


<аџаіо іа="раскогоцџпамиѕіс" 1оор> 


<ѕоцгсе згс="ТһеОм1МатедӢогіоп.тр3" ёуре="ацџаіо/тр3"> 


<ѕоцгсе згс="ТһеОм1МатеаӢогіоп.одд" Буре="аца1о/оаа"> 
</аџаіо> 


Так как для этого проигрывателя не указаны атрибуты аџёор1ау И сопіго1ѕ, то после 
запуска его не видно и не слышно. А указанный атрибут 1оор означает, что когда 
воспроизведение дорожки начнется, она будет продолжаться бесконечно. Для 
управления воспроизведением нам требуются два метода аудиообъекта (или видео- 
объекта): рІау () И рапзе (). Несколько неожиданно, но метода ѕёор () не существует, 
и для остановки воспроизведения нужно сначала его приостановить методом 
раџѕе (), а потом сбросить значение свойства соггепётілме в 0, что представляет на- 
чало файла. 
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Приняв все это во внимание, не составляет труда начать воспроизведение фоновой 
дорожки при создании первого мячика: 


уаг аџаіоЕ1емепі = досотепі .деёЕ1епепЕВу1а ("раскагоцпамиѕіс"); 


аџаіоЕ1етепі.р1ау(); 


И так же легко остановить воспроизведение при очистке холста: 


уаг аџаіоЕ1емепі = аосотепі .деёЕ1 епепЕВу1а ("раскагоцпамиѕіс"); 
аџаіоЕ1етепі .раизе () ; 


аџаіоЕ1етепі .соггепіТіте = 0; 


Как упоминалось ранее, можно запустить неограниченное количество проигрыва- 
телей <аџдіо> одновременно. Поэтому, запустив воспроизведение фонового сопро- 
вождения, мы можем приступить к более сложной задаче добавления звуковых эф- 
фектов. 


В данном примере, всякий раз, когда мячик отскакивает от "стены" или "пола", 
проигрывается звуковой эффект "боинк"'. Для разнообразия слышны несколько 
слегка отличающиеся друг от друга звуки "боинк". Это подобие более реалистиче- 
ской игры, в которой, как правило, применяется десяток или больше разных звуков. 


Реализовать этот замысел можно несколькими способами, но не все они будут 
практичными. Как вариант, можно создать один элемент <аџаіо> для проигрывания 
всех звуковых эффектов. Потом при каждом столкновении в этот элемент можно 
загружать один из аудиофайлов (посредством установки значения атрибута ѕгс) и 
проигрывать его. Но этот подход наталкивается на две преграды. Первая: один эле- 
мент <апа1о> может одновременно воспроизводить только один звук. Таким обра- 
зом, если несколько мячиков столкнутся со стеной или полом одновременно или в 
быстрой последовательности, нужно будет либо игнорировать второй звук, пере- 
крывающий первый, либо остановить воспроизведение первого звука, чтобы начать 
проигрывать второй. Другая проблема состоит в том, что установка значения свой- 
ства зкс заставляет браузер запрашивать аудиофайл. И если некоторые браузеры 
справляются с этой задачей достаточно быстро (когда файл уже находится в кэше), 
то Пиегпе! Ехр]огег — нет. В результате получаем запоздалое аудио, иными слова- 
ми, "боинк" звучит полсекунды после столкновения. 


Лучше использовать группу элементов <аџаіо>, по одному для каждого звука. Да- 
лее показан пример кода для создания такой группы: 


<аџаіо іа="аџаіо1"> 
<ѕоцгсе зкс="ро1па1.пр3" ёуре="аџаіо/тр3"> 
<ѕоцгсе згс="роіпд1.мау" ёуре="аџаіо/мау"> 
</аџаіо> 
<аџаіо іа="аџаіо2"> 
<ѕоцгсе згс="роіпд2.тр3" іуре="аџаіо/тр3"> 
<ѕоцгсе згс="роіпд2.мау" ёуре="аџаіо/мау"> 
</аџаіо> 


' Этот звук похож на звук от вибрирующей пружины или от варгана — язычкового народного инст- 
румента. — Ред. 
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<аџаіо 1а="апа1о3"> 
<зойгсе зкс="ро1па3.птр3З" іуре="аџаіо/тр3"> 
<зойгсе зкс="ро1па3.мау" ёуре="ацаіо/мау"> 
</апа1о> 


ПРИМЕЧАНИЕ 


Не обязательно, чтобы все три элемента <аза1о> проигрывали разные аудиофайлы. 
Например, если использовать только один звук, но обеспечить возможность перекры- 
вающихся звуков от столкновений нескольких мячиков, все равно следует применять 
три аудиопроигрывателя. 


Когда мячик сталкивается с преградой, код ЈауаЅсгірї вызывает специальную функ- 
цию роіпо (). Эта функция берет очередной элемент <аџадіо> и проигрывает его. 


Реализуется все это следующим кодом: 


// Отслеживаем количество элементов <аџаіо>. 


уаг аџаіоЕ1етепіСооџпі = 3; 


// Отслеживаем элемент <аџаіо>, следующий в очереди на проигрывание. 


хуаг ап 1оЕ1етепеТпаех = 1; 


Ғипсёіоп Бо1па() { 
// Берем следующий в очереди на проигрывание элемент <аџаіор>. 


уаг аџаіоЕ1етепЕМатме = "апа1о" + аиа1оЕ1етерЕТраех; 


уаг аџаіо = аоситепі .десЕ1етепЕВуТа (аџаіоЕ1епепЕМћапе) ; 


// Воспроизводим звуковой эффект. 
аџаіо.соггепЕТіте = 0; 


аџдіо.р1ау(); 


// Переводим счетчик на следующий элемент <аџаіо>. 


1Е (аџаіоЕ1етепіІпадех == аџаіоЕ1іетепЕСоџпі) { 
аџаіоЕ1етепіІпаех = 1; 
} 


е1зе { 


ацаіоЕ1етепіІпаех += 1; 


СОВЕТ 


Ознакомиться с работой этого примера и его звуковыми эффектами можно на сайте 
книги ћр://умм.ргоѕеїесһ.сот/һіті5/. 


Этот подход работает удовлетворительно. Но если требуется использовать намного 
больший диапазон звуковых эффектов? Реализовать это будет легче всего, создав 
скрытый элемент <аџаіо> для каждого звука. Если по каким-либо причинам это не- 
возможно, тогда следует динамически устанавливать значение свойства атрибута 
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зэгс имеющегося элемента <аџаіо>. Можно также динамически создавать новый 
элемент <аџаіо»>, как показано в следующем коде: 


уаг ап 1о = Яосотепі . сгеаёеЕ1етепі ("аџаіо"); 


аџаіо.згс = "пемѕоцпа.тр3"; 


или использовать этот быстрый ВЫЗОВ: 


уаг аџаіо = пем Аџаіо ("пемзоппа.тр3"); 


Но оба эти подхода имеют потенциальные проблемы. Первая проблема: аудиофайл 
нужно указать задолго до его воспроизведения. В противном случае воспроизведе- 
ние будет запоздалым, особенно в Іпіегпеі ЕхрІогег. Вторая проблема: нужно знать, 
какие аудиоформаты поддерживаются, чтобы можно было установить правильный 
тип файла. Это требует применения неуклюжего метода сапріаутуре (). Методу пе- 
редается МІМЕ-тип аудио или видео, и он определяет, может ли браузер воспроиз- 
водить этот формат. Впрочем, сказать "определяет" будет не совсем верно. В дей- 
ствительности метод сапр1аутуре () возвращает: пустую строку, если данный фор- 
мат не поддерживается браузером; строку ргораріу, если он думает, что 
поддерживается; и строку пауре, если он надеется, что, возможно, поддерживается, 
но не может давать никаких обещаний. Такая довольно непривлекательная ситуа- 
ция существует вследствие того, что поддерживаемые форматы контейнера могут 
использовать неподдерживаемые кодеки, а поддерживаемые кодеки могут исполь- 
зовать неподдерживаемые настройки кодирования. 


Большинство разработчиков останавливается на коде, наподобие показанного в 
листинге далее, который пытается воспроизводить файл, если метод сапР1ауТуре () 
возвращает любой ответ, кроме пустой строки: 


1Е (аџаіо.сапР1ауТуре ("аџаӢіо/одд")) { 
аџаіо.згс = "пемзоцпа.о99"; 


} 
е1зе 1Е (аџаіо.сапР1аутТуре ("ацЯ1о/тр3")) { 


апа1о.згс = "пемзоипа.тр3"; 


Создание своего видеопроигрывателя 


Одним из основных поводов заняться углубленным изучением программирования 
элементов <аџаіо> и <уіаео> в ЈауаЅсгірї будет создание собственного проигрывате- 
ля. Основная идея заключается в простоте процесса — удаляем атрибут сопего1з, 
чтобы было только окно воспроизведения, и добавляем внизу его свои кнопки 
управления воспроизведением. А чтобы эти кнопки функционировали, добавляем 
соответствующий Јауа$Ѕсгірі-код. Пример полученного таким образом видеопроиг- 
рывателя показан на рис. 5.7. 


Любому видеопроигрывателю требуется базовый набор кнопок управления вос- 
произведением. Стандартные кнопки управления воспроизведением проигрывателя 
на рис. 5.7 создаются следующим кодом: 
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<Баебоп опс11ск="р1ау () ">Р1ау</роёёоп> 
<роёёоп опс1іск="рацѕе () ">Рацѕе</роёёоп> 
<роёёоп опс1іск="ѕіор () ">5ёор</роіёоп> 


Нажатие этих кнопок активирует следующие сверхпростые функции: 


Ғопсёіоп р1ау() { 
уіаӢео.р1ау(); 

} 
Ғопсііоп раизе() { 
у1аео .раизе (); 

} 


Ғипсііоп зёор() { 


уіаео.рацѕе (); 
уіаео.соггепЕТіте = 0; 


[ НИЕ >” 


/ у Ооу Рвуег \ © 


< С О неу//С/НТМІ5/Сһарїег%2005/091уРІауегһті 3$ аб 


\ог1а'5 Соіеѕё Уіео РІауег 


[Рау] [Раизе | [юр] [Еазё] [юм | [| Мота Зрееч | 


Рис. 5.7. Создание своего видеопроигрывателя НТМІ5 не составляет никакого труда 
(чего нельзя сказать о придании ему привлекательного внешнего вида). Данный проигрыватель оснащен 
стандартными кнопками управления воспроизведением, индикатором хода воспроизведения, а также 
несколькими дополнительными кнопками, которые демонстрируют, что можно делать 
с элементом <уі део с помощью Јауа$сгірі 


Функции других кнопок управления воспроизведением не совсем стандартные — 
они используются для регулирования скорости воспроизведения путем значения 
свойства р1аурасквка+е. Например, при значении ріаурасккабе равным 2 видео про- 
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игрывается вдвое быстрее нормальной скорости, но с откорректированной высотой 
тона, вследствие чего звук воспроизводится нормально, только вдвое быстрее. Это 
замечательная возможность для ускоренного просмотра медленных видеоинструк- 
ций. Аналогично, при значении р1ауБаскВаее равном 0.5 видео проигрывается 
со скоростью, составляющей половину нормальной скорости. При значении 
р1ауБаскВаее равном -1 видео должно проигрываться с нормальной скоростью, 
только в обратном направлении, но браузеры сталкиваются с проблемой реализа- 
ции этого режима должным образом. Код для реализации этих функций сле- 
дующий: 


Ғипсііоп зрееаур () { 
уіаео.р1ау (); 
уіаео.р1ІаураскКаїе = 2; 


Ғопсёіоп ѕ1омроип() { 
уіаео.р1ау(); 
уіаео.р1ІаураскКа+е = 0.5; 


Ғипсііоп погиа15рееа() { 
уіаео.р1ау (); 
уіаео.р1ІаураскКаїе = 1; 

} 


Задача создания индикатора хода воспроизведения представляет несколько боль- 
ШИЙ интерес. В отношении разметки он создается из двух элементов <аіу>, один из 
которых вложен в другой: 


<аіу іа="аџгаёіопВаг"> 
<аіу іа="роѕіёіопВаг"><зрап іа="а4іѕр1ауѕёаёцѕ">ТІа1е.</ѕрап></аіу> 
</аіу> 


СОВЕТ 


Индикатор хода воспроизведения является примером ситуации, идеально подходя- 
щей для использования элемента <ргодгезз> (см. разд. "Индикатор выполнения 
<ргодгеѕѕ> и счетчик <теег>" главы 4). Но уровень браузерной поддержки элемента 
<ргодгезз> все еще низкий, намного ниже, чем возможности видео НТМЕ5. Поэтому 
в этом примере подобно выглядящий индикатор создается с помощью двух элементов 
<аіур. 


Внешний элемент <аіу> (с именем аџгасіопВаг) рисует черную рамку, которая об- 
рамляет весь индикатор и имитирует полную продолжительность видео. Внутрен- 
ний элемент <аіу> (с именем роѕієіопВаг) указывает текущую точку воспроизведе- 
ния, заполняя часть черного индикатора синим цветом. Наконец, элемент <ѕрап> 
внутри внутреннего элемента <а1у> содержит текст, указывающий текущую пози- 
цию воспроизведения в секундах. 
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Далее приведены правила таблицы стилей, которые устанавливают размер индика- 
торов и окрашивают их в соответствующие цвета: 


#аџгаёіопВаг { 
рогаег: $011а 1рх Юр1аск; 
міаёһ: 100$; 


пагадіп-роїёом: 5рх; 


#роз1Е1опВаг { 
Һеідћ+: З0рх; 
со10ог: хһіёе; 


Ғопё-меідһё: ро1а; 
раскагоџпа: зіёее1рілое; 
Бехі-а1ідп: сепіег; 


} 


В процессе воспроизведения элемент <уіаео> постоянно активирует событие 
опТіте0рааѓе. Реагируя на это событие, обновляем индикатор хода воспроизведе- 
НИЯ: 


<у1аео іа="уідеоР1ауег" опЕ1теираа®е="ргодхеззОрЧате () "> 
<зойгсе згс="рабкегЕ1у.пр4" ёуре="уіадео/тр4"> 
<зойгсе згс="риёбёегЁЕ1у. осу" ёуре="уіаео/одд"> 
</уіаео> 


А этот код получает от свойства сиггепітіте значение текущей позиции в видео, 
разделяет его на общее время (свойство іогабіоп) и преобразует результат в про- 
центное значение, которое используется для установления размера <аіу>-элемента 
розЕ1Е1опВаг: 


Ғипсііоп ргодгеѕз0рааіе () { 
// Корректируем длину синего <діу>-элемента розіїіопВаг, от 0 к 100%. 


уаг роѕіііопВаг = аосимепе .чеЕЕ1ещтеп®ВуТа ("роѕіёіопВаг"); 


роѕзіёіопВаг.ѕёу1е.міаёћһ = (уіадео.соиггепЕТіте / 
уіаео.аоџогаііоп * 100) + "%"; 
// Выводим число секунд до двух десятичных разрядов. 
аіѕр1ауѕёаёцѕ.іппегнтТмі = (Маһ. гоџпа (уідео.соггепіТіте*100) /100) + 
Ш зес"; 


СовеТ 


Можно сделать индикатор выполнения немного замысловатей, добавив индикатор за- 
грузки, показывающий объем содержимого, загруженного и помещенного в буфер 
в данный момент. Эта возможность уже имеется в проигрывателях, встроенных в 
браузеры. Чтобы добавить этот индикатор, нужно обрабатывать событие опРгодгез5 
и работать со свойством ѕеекар1е. Дополнительную информацию о свойствах, мето- 
дах и событиях элемента <уідео> см. в справочных материалах Мсгозой по адресу 
ћир://тѕап.тісгоѕоЌ.сот/ги-ги/іргагу/#975073.аѕрх. 
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Проигрыватели на Јахуа$сгірі 


Если вы не хотите ни от кого зависеть в своей работе, то можете создать свой 
аудио- или видеопроигрыватель с чистого листа. Но это будет очень трудоемким 
проектом, особенно если вы хотите обеспечить разные вычурные возможности, на- 
подобие интерактивного списка воспроизведения. К тому же, если за вашей спиной 
нет небольшого дизайнерского отдела, то существует отчетливая вероятность, что 
конечный продукт ваших усилий будет иметь слегка уродливый внешний вид. 


К счастью, для веб-дизайнеров, блуждающих в поисках идеального НТМГ5- 
проигрывателя, имеется лучший вариант. Вместо того чтобы разрабатывать муль- 
тимедийный проигрыватель самому, можно взять бесплатный, настраиваемый по- 
средством ЈауаЅстгірі проигрыватель в Интернете. Два из них — это \У14ео]$ 
(Шр://ео}5.сот) и, для фанатов библиотеки }Очегу, ]РЛауег (ууу. Шауег.ого). 
Оба проигрывателя легковесные, удобны в использовании, а также имеют функцию 
смены скинов с помощью таблицы стилей (рис. 5.8). 
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Рис. 5.8. Проигрыватель \ійеоЈ5 имеет функцию смены скинов, которые имитируют внешний вид 
популярных видеовеб-сайтов, включая ҮоиТирбе, Уітео и Ним. 
Здесь показано изменение элементов управления воспроизведением при смене скинов 


Большинство проигрывателей мультимедиа на Јауа$Ѕсгірі (включая проигрыватели 
У1аеоЈ8 и ЈРІауег) содержат встроенные резервные решения Е1аѕһ, что позволяет 
разработчику сэкономить время и усилия на поиски отдельного На$П- 
проигрывателя. А проигрыватель јРІауег имеет удобную функцию создания списка 
воспроизведения, позволяющего выбрать для проигрывания или просмотра не- 
сколько файлов (рис. 5.9). 


Чтобы использовать УійеоЈ8 в своих разработках, сначала загрузите его ЈауаЅсгірі- 
файлы с веб-сайта проигрывателя. Потом вставьте ссылку на его сценарий и табли- 
цы стилей, как показано в следующем коде: 
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<!РОСТУРЕ Һёт1> 
<р 1 > 
<Һеаа> 
<пеёа сһагѕеі="об#-8"> 
<Е1Е1е>...</&11е> 


<ѕсгірё ѕгс="уіаео.јѕ"></ѕсгірі> 
<Ііпк ге1="ѕіуІеѕҺееё" ҺгеҒ="уійео-јѕ.сѕѕ"> 
</Љеаа> 


| ЈР рето : ЈРІауег аѕ мЧео ріауііѕ+ апа аџаї... 


> | 2. һер://алмгјрівуег.ого/аќезі/йето-02/ 


= Від Виппу Тгайег (т4у | оду) 


Еіпаіто Мето Теззег 


ІпсгейіЫіеѕ Теаѕег 


Һр: јріауег,огд/аёесі/ето-02/2 _] 
ыыы п БЫДЫР аьели В 


Рис. 5.9. Функция создания списка воспроизведения проигрывателя |Р!ауег позволяет поставить 
в очередь для проигрывания несколько файлов. Файлы в списке можно проигрывать 
в существующей последовательности или выбрать требуемый файл, щелкнув на нем мышью. 
Здесь список содержит три видеофайла 


Затем используется обычный элемент <уідео> с несколькими элементами <ѕоџгсе> 
и резервным решением Е1аѕһ. (Для резервного ЕІаѕһ-решения в проигрывателе 
У1аеоЈ8 используется Еюоуур|ауег, но его можно удалить и использовать другой 
Е1аѕһ-проигрыватель.) По сути, единственная разница между обычной страницей 
НТМІ5 и страницей с проигрывателем \У14ео]$ состоит в том, что в последней 
нужно использовать специальный элемент <аіу>, чтобы вставить в него видеопро- 
игрыватель: 
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<аіу с1аѕѕ="уійео-јѕ-рох"> 
<уідӢео сІаѕѕ="уійео-јѕ" птіабһ="640" һеідһі="264" сопіго1зѕ ...> 


</уіаео> 
</аіу> 


Приятно видеть, что даже при расширении НТМІ5 работа с ним остается довольно 
легкой. 


Субтитры и доступность 


Как мы узнали в предыдущих главах, создатели НТМІ5 часто уделяли внимание 
вопросу доступности веб-страниц, иными словами, люди с ограниченными воз- 
можностями легко и эффективно могут пользоваться расширенными веб-стра- 
ницами. 


Добавление информации в страницу для повышения уровня ее доступности — до- 
вольно простая задача. Нужно просто добавить соответствующее описание в атри- 
буте а1+. Но что может быть эквивалентом описания <а1є> для видеопотока? Об- 
щим мнением по этому вопросу является использование субтитров, т. е. текстовых 
надписей, которые выводятся в соответствующем месте при воспроизведении. Суб- 
титры могут быть подобны телевизионным субтитрам, т. е. просто транскрипцией 
диалога, или же описательными и предоставлять дополнительную информацию. 
Суть заключается в том, что они предоставляют пользователю возможность сле- 
дить за происходящим в видео, даже если у человека проблемы со слухом (или если 
он не хочет, чтобы весь офис знал, что он смотрит боевик, вместо того, чтобы рабо- 
тать над отчетом). 


К сожалению, несмотря на то, что использование субтитров явно выделяется как 
идеальное решение, согласие о том, как именно его реализовывать, никак не может 
быть достигнуто. В НТМІ5 предлагается использовать элемент <егаск>, который 
будет указывать на связанный файл субтитров, возможно, используя формат 
ҰеБЅКТ или более новый и все еще развивающий формат \еБУТТ. В ближайшем 
будущем браузеры смогут считывать этот элемент и предоставлять пользователям 
элементы управления для включения и выключения субтитров, а поисковые систе- 
мы смогут извлекать файлы субтитров и индексировать их содержимое. Но в на- 
стоящее время окончательные подробности еще не согласованы, и никакие офици- 
альные действия не предпринимались. 


Но разработчики уже создали собственные обходные решения на ЈауаЅсгірі для 
предоставления субтитров. Обычно в этих решениях используется элемент <зрап>, 
который выводится поверх окна видео и заполняется текстом субтитров в соответ- 
ствующих местах воспроизведения. Например, на веб-сайте уууууу.юмезт ВЕ. сот/ 
јѕ_уійеоѕир можно загрузить ЈауаЅсгірі-библиотеку УійеоЅиБ, с помощью которой 
можно извлекать текст из файла субтитров в формате \№УеБЅКТ и отображать его 
в окне видео (рис. 5.10). 


Сценарий У14еоЗи6 проверяет поддержку субтитров браузером и вступает в дейст- 
вие, только если браузер не имеет этой возможности. (В настоящее время, это 
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ЕГЕТ 
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Рис. 5.10. Две ссылки на сценарий Јауа$сгірї и файл Меб$КТ — вот и все, что потребовалось, 
чтобы добавить субтитры к этому видео 


всегда, т. к. ни один из браузеров не поддерживает субтитров.) Существует даже 
полноценный проигрыватель на ЈауаЅсгірі — ГеапВаск РІауег, со встроенной под- 
держкой субтитров (В р://4еу ллеппенсВ.пате/5Воуугоот/ 5 _У14ео). К сожале- 
нию, еще слишком рано назвать наилучший подход к реализации субтитров, под- 
ход, который будет работать с минимальными усилиями на браузерах следующего 
поколения. Поэтому, если вам действительно нужны субтитры сейчас, вам следует 
продолжать использовать ЈауаЅсгірі и быть готовым к модифицированию своих 
страниц по мере развития НТМІ. 


ГЛАВА 6 


Основы рисования на холсте 


Как мы узнали в главе 1, одна из целей НТМІ5 — облегчить внедрение расширен- 
ных приложений в обычные во всех других отношениях веб-страницы. Термин 
"расширенное приложение" означает не приложение большого объема, а приложе- 
ние с расширенными возможностями, такими как искусная графика, интерактивные 
функции и анимация. 


Самым важным новым инструментом для расширенных приложений является 
холст — поверхность для рисования, на которой пользователь может дать волю 
своим непризнанным художественным способностям. Холст стоит обособленно от 
всех других элементов НТМІ, т. к. для работы с ним требуется Јауа$стірі. Иного 
способа для черчения фигур или рисования изображений попросту нет. Это означа- 
ет, что холст, по сути, является средством программирования, таким, которое по- 
зволяет выйти далеко за пределы первоначального концепта Интернета, согласно 
которому он основывается на содержимом документного типа. 


С первого взгляда использование холста может казаться похожим на использование 
программы М5 Рашь вставленной в окно браузера. Но, копнув поглубже, можно 
увидеть, что холст — ключевой компонент для ряда графически продвинутых при- 
ложений, включая некоторые приложения, о которых вы уже, наверное, и сами по- 
думали — игры, картографические инструменты и динамические графики, и такие, 
которые вы, возможно, не могли вообразить — музыкально-световые представле- 
ния и эмуляторы физических процессов. В не очень далеком прошлом создание та- 
ких приложений без помощи модулей расширения, таких как ЕазВ, являлось чрез- 
вычайно сложной задачей. Сегодня же холст внезапно делает все эти приложения 
возможными, если, конечно, вы готовы на дополнительные временные и интеллек- 
туальные затраты. 


В этой главе мы узнаем, как создавать холст и рисовать на нем прямые и кривые 
линии и простые фигуры. Потом мы дадим нашим новоприобретенным навыкам 
практическое применение, создав простую программу рисования. Также, возможно, 
самое главное, мы узнаем (см. разд. "Холст на заполнителе" далее в этой главе), 
как заставить страницы с холстом работать на старых браузерах, которые не под- 
держивают НТМГ5. 
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ПРИМЕЧАНИЕ 


Для одних разработчиков холст будет незаменим, в то время как для других он будет 
всего лишь интересным развлечением. (А для третьих он, возможно, будет представ- 
лять интерес, но требовать слишком много усилий по сравнению с отработанной 
платформой программирования наподобие Еіаѕћ.) Но можно быть уверенным в одном: 
этой простой поверхности для рисования отводится намного более важная роль, чем 
простой забавы для развлечения скучающих программистов. 


Базовые возможности холста 


Элемент <сапуаз> предоставляет рабочее пространство для рисования. С точки зре- 
ния разметки, это простой до предела элемент с тремя атрибутами — іа, міаєћ и 
Һеідћі: 


<сапуаз ід="ЯгаиіпдСапуаѕ" міаёһ="500" Һеідһі="300"></сапуаѕ> 


Атрибут іа присваивает данному холсту однозначное имя, требуемое для его иден- 
тификации кодом ЈауаЅспірі. А атрибуты изаеь и һеісһє устанавливают ширину и 
высоту холста в пикселах, соответственно. 


ПРИМЕЧАНИЕ 


Размеры холста всегда следует устанавливать посредством атрибутов міаєћ и 
Һеідһі элемента <сапуаз>, а не с помощью свойств кіаёћ и пеісћё таблицы сти- 
лей. В противном случае возможно возникновение проблемы, которая рассматривает- 
ся во врезке "Аварийная ситуация. Все мои рисунки искажены!" главы 7. 


Обычно холст отображается как пустой прямоугольник без рамки, т. е. он не виден 
вообще. Чтобы сделать холст видимым, с помощью таблицы стилей ему можно за- 
дать цветной фон или рамку, как показано в следующем коде: 


сапуаѕ { 
рогаег: 1рх ааѕһеа р1Іаск; 
} 


Полученный результат, который будет нашей отправной точкой в изучении холста, 
показан на рис. 6.1. 


Чтобы рисовать на холсте, нужно написать определенный объем кода ЛауаЗспре. 
Эта задача состоит из двух этапов. Первым делом наш сценарий должен получить 
объект холста, для чего используется метод досотепё .декЕ1етепеВута(): 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("Чгам109Сапуаз") ; 


В этом нет ничего особенного, т. к. метод адеёЕ1етепёВута () применяется во всех 
случаях, когда необходимо найти элемент на текущей странице. 


ПРИМЕЧАНИЕ 


Если вы не в ладах с ЧауаЗспр\, то не продвинетесь далеко в работе с холстом. Чтобы 
получить минимально необходимые знания Јауа$сгірі, ознакомьтесь с материалом 
в приложении 2. Чтобы получить более обширные знания в этой области, обратитесь 
к специальной литературе. 
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№ | | САНТМЕ$\СВаре О ~ © х |е Сапуаѕ Тез | | л) 2.7 


"100% ~ 


Рис. 6.1. Изначально холст — всего лишь пустой прямоугольник на веб-странице. 
Чтобы нарисовать на нем хотя бы одну линию, нужно написать несколько строчек 
кода Јауа$сгірї 


Теперь надо получить двумерный контекст рисования, для чего применяется метод 
деёСопёех+ (): 


уаг сопіехі = сапуаз.деіСопёехі ("24"); 


Контекст можно рассматривать как сверхмощный инструмент рисования, который 
выполняет все необходимые для этого операции, такие как создание прямоуголь- 
ников, печатание текста, вставка изображений ит. п. Это что-то наподобие универ- 
сальной мастерской ДЛЯ операций рисования на холсте. 


ПРИМЕЧАНИЕ 


Тот факт, что контекст явно называется двумерным (и в коде указывается как "24"), 
порождает очевидный вопрос, а именно: существует ли трехмерный контекст рисова- 
ния? Ответ на этот вопрос — пока нет, но ясно, что создатели НТМЕ5 оставили место 
для него в будущем. 


Получить объект контекста и начать рисование можно в любой момент, например, 
сразу же после загрузки страницы, когда пользователь щелкнет мышью, и т. п. Вам, 
скорее всего, уже не терпится создать страницу, на которой можно было бы сразу 
же приступить к практической работе с холстом. В следующем листинге приведен 
код для создания шаблона такой страницы: 


<!рОСТУРЕ Һёт1> 

<Һіпі 1апа="еп"> 

<Һеаа> 
<пефа сһагѕеі="оі-#-8"> 
<Е1Е1е>Сапуаз Теѕі</біб1е> 
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<5Еу1е> 
сапуаѕ { 
рогаег: Ірх ааѕћһеа р1Іаск; 
} 
</ѕіу1е> 


<ѕсгірё> 
міпаӢоуи.оп1оаа = Ёопсёіоп() { 


уаг сапуаз = аосипепі .деіЕ1етепіВута ("агаміпдСапуаѕ"); 
уаг сопіехі = сапуаз.деїСопбехі ("24"); 


// (Код для рисования вставляется сюда) 
}; 

</ѕсгірё> 
</Һћеаа> 
<роау> 

<сапуаз іа="агакіпдСапуаѕ" міаёһ="500" Һеідһё="300"></сапуаѕ> 
</роду> 
</ћіт1> 


В разделе разметки <з+у1е> для холста создается рамка, указывающая его местона- 
хождение на странице. А в разделе <ѕсгірі> обрабатывается событие и1паом. оп1оаа, 
которое происходит после полной загрузки страницы браузером. После этого код 
получает объект холста и создает контекст рисования, подготовившись таким обра- 
зом к рисованию. Эту разметку можно использовать в качестве отправной ТОЧКИ 
ДЛЯ дальнейших экспериментов с холстом. 


ПРИМЕЧАНИЕ 


Конечно же, при использовании холста в настоящей странице веб-сайта разметку 
следует немного разгрузить, удалив из нее код Јауа5сгірі и поместив его во внешний 
файл сценариев. Как это сделать, см. в разд. "Перемещение кода УЛауаЗспрЕ в файл 
сценариев" приложения 2. Но на данном этапе удобнее, чтобы этот код находился 
в шаблоне страницы холста. Если вы не в настроении вводить код примера вруч- 
ную, эту разметку можно взять из файла СапуаѕТетріаїе.ћті на сайте книги 
(мму.ртѕеїесһ.сот/һіті5). 


Прямые линии 


Теперь мы почти готовы приступить к рисованию. Почему почти? Потому что пре- 
жде нам нужно разобраться с системой координат холста. Принцип ее работы пока- 
зан на рис. 6.2. 


Самой простой фигурой, которую можно нарисовать на холсте, будет прямая ли- 
ния. Для этого нужно выполнить три действия с контекстом. Сперва надо указать 
начальную точку линии с помощью метода поуето (). Потом с помощью метода 
1іпето () задать конечную точку линии. Наконец, метод зігоке () собственно рисует 
линию: 
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сопіехі .тоуеТо (10,10); 
сопбехе.11пеТо (400,40); 
сопіехі.зігоке (); 


С точки зрения обычного рисования эти действия можно рассматривать так: снача- 
ла мы ставим карандашом начальную точку линии (метод поуеТо ()), потом ставим 
конечную (метод 1іпето ()) и, наконец, собственно рисуем линию, соединяя ее на- 
чальную и конечную точки (метод зехоке ()). В результате исполнения этого кода 
точки (10, 10) и (400, 40) соединяются линией толщиной в один пиксел. 


@) САНТМЕ\ Саре О ~ © Х | © стаз Тез 


об ава Е * Е в оба ера 1 
| Точка (0, 0) | : 


150 пикселов 


4——— 250 пикселов ——%»® Точка (250, 150) 


Рис. 6.2. Координаты левой верхней точки холста, называющейся исходной точкой, равны (0, 0). 
Значение абсциссы (т. е. х-координаты) увеличивается при перемещении вправо от исходной точки, 
а значение ординаты (т. е. у-координаты) — при перемещении вниз. Таким образом, для холста 
размером в 500х300 пикселов координаты конечной точки (правого нижнего угла) холста 
будут равны (500, 300) 


К счастью, стиль линии можно разнообразить. На любом этапе рисования линии, 
но перед тем как вызывать метод ѕіхоке (), можно установить три свойства контек- 
ста рисования: 1іпейтіаёћ, ѕікокеѕіу1е и 1іпесар. Эти свойства продолжают дейст- 
вовать до тех пор, пока не будут изменены. 


Свойство 1іпейіаёћ определяет толщину линии в пикселах. Например, следующая 
строка кода устанавливает толщину линии в 10 пикселов: 


сопёехі.1іпейіаёћһ = 10; 


Свойство ѕігокеѕёу1е определяет цвет линий. Значение этого свойства может быть 
в виде названия цвета НТМГ, кода цвета НТМІ. или же С$$-функции гор (), кото- 
рая позволяет создать цвет из его красной, зеленой и синей составляющей. (Это по- 
лезно, т.к. большинство программ черчения и рисования используют такую же 
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систему.) Независимо от выбранного вами подхода, значения цвета нужно заклю- 
чить в кавычки, как показано ниже: 


// Устанавливаем красно-коричневый цвет посредством кода цвета НТМІ: 
сопбехі.зѕігокеѕіу1е = "#са2525"; 


// Устанавливаем красно-коричневый цвет посредством функции гор (): 
Ғипсііоп: сопіехі.ѕігокеѕіуІе = "гор (205,40,40)"; 


ПРИМЕЧАНИЕ 


Свойство ѕёхокеѕёіу1е называется именно так, а не зехокеСо1охг, т. к. позволяет 
устанавливать не только чистые цвета. Как мы увидим далее, цвет можно задавать в 
виде градиентной закраски (см. разд. "Градиентная заливка фигур" главы 7) и в виде 
узора из изображений (см. разд. "Заполнение фигур изображениями" главы 7). 


Наконец, свойство 1іпесар указывает тип концов линии. По умолчанию этому 
свойству присваивается значение рае (что придает концам линии прямоугольную 
форму), но можно также присвоить значение хора, делая концы округлыми, и 
ѕаоге. Последнее значение также делает концы линии прямоугольными, как и зна- 
чение ро++, но удлиняет ее на каждом конце на половину значения толщины линии. 
Таким же образом линия удлиняется и при форме концов коплпа. 


Далее приведен код для рисования трех горизонтальных линий, каждая со своим 
стилем концов (рис. 6.3). 


Чтобы испытать этот код в действии, вставьте его в любую функцию ЈауаЅстірі, а 
потом вызовите ее. Для немедленного исполнения сразу же после загрузки страни- 
цы вставьте его в функцию, которая обрабатывает событие и+пдом.оп1оаа (см. код 
шаблона страницы с холстом в разд. "Базовые возможности холста" ранее в этой 
главе). 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("агаміпдСапуаѕ"); 
уаг сопіехі = сапуаз.деіСопёехі ("24"); 


// Устанавливаем толщину и цвет для всех линий. 
сопіехі.1іпейіаёћһ = 20; 
сопіехі.зігокебіуІе = "гдр (205,40,40)"; 


// Рисуем первую линию с концами типа Юиіё. 
сопіехі .моуеТо (10,50); 

сопіехі .1іпеТо (400,50); 

сопіехі.1іпеСар = "роі"; 


сопіехі.зігоке (); 


// Рисуем вторую линию с концами типа гоппа. 
сопіехі .редіпРаїћ (); 

сопіехі .поуеТо (10,120); 

сопіехіё .1іпеТо (400,120); 

сопіехі.1іпеСар = "гоцпа"; 


сопіехі.зігоке (); 
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// Рисуем третью линию с концами типа ѕаџаге. 
сопіехі .редіпрРаїћ (); 

сопіехі .шоуеТо (10,190); 

сопіехі .11пеТо (400,190); 

сопіехі.1іпеСар = "задаге"; 


сопсехе .зегоке (); 


| Ргеюх т | = [= 53-8 
1 Ипез | + | у 
< 1] Не///СУИНТМЕ$ИСВариег Об/ тез. Вт! - аа. в: 


РРГГРРРГГРРРРРГРРРРРРРРРРрРРРРрРрРРрРРРРРРРРРГОГРРГРРЕГРРРРРРРРРРРРЕЧАНААААЧЧНЕНЕЕЕЦЕ - 


Рис. 6.3. Верхняя линия имеет стандартные прямоугольные концы типа Басе, 
а на концы двух других добавлены наконечники (округлые и прямоугольные), которые удлиняют 
эти линии на половину их толщины 


В этом примере вводится новая функция: метод ресіпраёћ () контекста рисования. 
Вызов метода ресдіпрРаіһћ () начинает новый, отдельный путь рисунка. Если не вы- 
полнять этот шаг, то при каждом новом вызове метода ѕігоке () холст будет рисо- 
вать все снова. (Особенно это представляет проблему при изменении свойств кон- 
текста, когда рисование начинает выполняться по существующему контексту теми 
же фигурами, но с новым цветом, толщиной или окончаниями линий.) 


ПРИМЕЧАНИЕ 


Для того чтобы начать новый путь, надо вызвать метод ресіпраѓ+ћ (), а чтобы завер- 
шить путь, ничего особенного делать не нужно. Текущий путь автоматически считает- 
ся завершенным, как только создается новый путь. 


Пути и фигуры 

В предыдущем примере, чтобы отделить линии друг от друга, для каждой из них 
создавался НОВЫЙ путь. Этот подход позволяет присвоить каждой ЛИНИИ СВОЙ цвет, 
а также толщину и тип окончания. Важность путей также состоит в том, что они 
позволяют заполнять цветом фигуры. Например, нарисуем красными линиями тре- 
угольник посредством следующего кода: 
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сопіехі .тмоуеТо (250,50); 
сопіехіё .1іпеТо (50,250); 
сопіехі .1іпеТо (450,250); 
сопіехі .1іпеТо (250,50); 


сопіехі.1іпейіаёћһ = 10; 
сопіехі.зігокеѕіёуіе = "геа"; 


сопіехі.зігоке (); 


Теперь мы хотим закрасить внутреннюю область этого треугольника, но метод 
зігоке () ДЛЯ ЭТОЙ задачи не подходит. Здесь нужно закрыть текущий путь с по- 
мощью метода с1оѕерРа+һ (), выбрать цвет заливки, установив значение свойства 
Ғ1115+у1е, а потом вызвать метод Е111(), чтобы собственно выполнить заливку: 


сопіехі.с1іозѕерРаіћ () ; 
сопіехі.Ғі115іу1Іе = "Ю1ае"; 
сопіехі.Ғ111(); 


В этом примере стоит сделать пару доводок. Первое: при закрытии пути нет надоб- 
ности рисовать последний сегмент линии, т. к. вызов метода сіоѕераёһћ () автомати- 
чески строит линию между последней нарисованной точкой и начальной точкой. 
Второе: лучше сначала выполнить заливку фигуры и только потом очертить ее 
контуры. В противном случае линии контура могут быть частично перекрыты 
заливкой. 


Далее приведен полный код для рисования и заливки треугольника: 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("Чгам1п9Сапуаз") ; 
уаг сопіехі = сапуаз .чееСопбех® ("24"); 


сопіехі .шоуеТо (250,50); 
сопіехіё .1іпеТо (50,250); 
сопіехі .1іпеТо (450,250); 
сопіехё.с1ІозѕерРаіћ () ; 


// Делаем заливку. 
сопіехі.Ғі115іу1Іе = "Ю1ае"; 
сопіехі.Ғі11(); 


// Рисуем контур. 
сопіехі.1іпейіаёћһ = 10; 
сопіехі.зігокеѕіёуіе = "геа"; 


сопіехі.зігоке (); 


Обратите внимание, что в этом примере метод ресдіпра+ћ () вызывать не нужно, т. к. 
путь создается автоматически. Метод ресіпра+ћ () следует вызывать, только когда 
надо начать новый путь, например при изменении параметров линии или рисовании 
новой фигуры. Результаты выполнения кода показаны на рис. 6.4. 
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Рис. 6.4. Чтобы создать такую закрытую фигуру, устанавливаем начальную точку посредством метода 
поуетТо () ‚ указываем пути для каждой стороны с помощью метода 11пеТо (), а потом завершаем путь 
вызовом метода с1оѕерРа+һћ (). Созданный таким образом путь можно заполнить цветом 
посредством метода #111 () и очертить его контуры методом зекоке () 


ПРИМЕЧАНИЕ 


Вершины фигур, создаваемые соединяющимися линиями, можно оформить тремя 
разными способами, присваивая свойству контекста 1і пеЈоіп соответствующие зна- 
чения. Значение гола округляет вершины, значение п1Еге соединяет линии в вер- 
шине "под ус", а значение реуе1 обрезает вершины прямой линией. По умолчанию 
свойству 1 і пеЈоіп присвоено значение ті ге. 


В большинстве случаев, чтобы создать сложную фигуру, ее очертания нужно соз- 
давать пошагово, по одному отрезку за раз. Но одна фигура является достаточно 
важной, и для нее выделен отдельный метод. Это прямоугольник. Заполнить пря- 
моугольную область заливкой можно за один шаг методом ғі11 кесі (), которому в 
параметрах передаются координаты левого верхнего угла, ширина и высота прямо- 
угольника. 


Например, следующий код заполняет заливкой прямоугольную область размером 
100 х 200 пикселов с левым верхним углом в точке (0, 10): 


Ғі11Кесі (0,10,100, 200); 
Цвет заливки для метода ғіі1кесё () устанавливается так же, как и для метода 
Е111() СВОЙСТВОМ Ғі115+у1е. 


В один присест, используя метод эегокеВесе (), Также можно нарисовать и очерта- 
ния прямоугольника: 


зігокеКесі+ (0,10,100,200) ; 


Толщина и цвет линий прямоугольника определяются текущими значениями 
СВОЙСТВ 1іпейіаёћ И зігокебіу1е, ТОЧНО так же, как для метода ѕігоке (). 
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Кривые линии 


Чтобы рисовать что-то более сложное, чем линии и прямоугольники, нужно 
изучить следующие четыре метода: агс!(), агсТо(),  Бег1лехСагуеТо () И 
аџайгаёісСигуето (). Все эти методы рисуют кривые линии, и хотя каждый делает 
это по-своему, все они требуют хотя бы небольших (а некоторые и больших) зна- 
ний математики. 


Изо всех этих методов самый простой — метод агс (), который рисует дугу. Чтобы 
нарисовать дугу, нужно сначала представить себе в уме полный круг, а потом ре- 
шить, какую часть его окружности вы хотите рисовать (рис. 6.5)". 


1,5 л 
Начальный угол Конечный угол 
(3) (4) 
А < / - 
№ Центр 
0,5 д (1) 


Рис. 6.5. Дуга выглядит достаточно простой фигурой, но чтобы полностью ее описать, требуется 
несколько единиц информации. Сначала нужно нарисовать воображаемый круг. Для этого надо знать 
координаты центра (1) и радиуса (2), который определяет размер круга. Далее следует описать длину 

дуги на окружности, для чего требуется угол начала дуги (3) и угол ее окончания (4). 
Значения углов должны быть в радианах, которые выражаются через число л. 
Угол всей окружности равен 2х, половины — 1л ит. д. 


Собрав все необходимые данные, передаем их методу агс(): 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("агаміпдСапуаѕ"); 
уаг сопіехі = сапуаз.деіСопёехі ("24"); 


// Создаем переменные для хранения информации о дуге. 
уаг сепіегхХ = 150; 

уаг сепіегү = 300; 

уаг гаЯ1а$ = 100; 

хаг зёагііпдАпд1Іе = 1.25 * Маёһ.РІ; 

уаг епаіпдАпдіе = 1.75 * Маһ.РІ; 


// Рисуем дугу на основе этой информации. 
сопіехі.агс (сепіегх, сепёегү, гааіцѕ, зіагііпдАпод1е, епаіпдАпд1е); 
сопіехі.зігоке (); 


1 Обратите внимание, что угол отсчитывается по часовой стрелке, а не против часовой, как принято 
в тригонометрии. — Ред. 
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Дугу можно закрыть, соединив ее концы прямой линией. Для этого нужно вызвать 
метод с1оѕеРа+ћ () перед тем, как вызывать метод ѕігоке (). 


Кстати, окружность — это та же дуга, просто с углом 2л. Рисуется окружность сле- 
дующим образом: 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("агаміпдСапуаѕ"); 
уаг сопіехі = сапуаз.деіСопёехі ("24"); 


уаг сепіегхХ = 150; 

уаг сепіегү = 300; 

уаг гаЯ1а$ = 100; 

уаг ѕіагііпдАпд1е = 0; 

уаг епаіпдАпд1е = 2 * Ма еВ.РТ; 


сопіехі.агс (сепіегх, сепёегү, га Таз, зіагііпдАпод1е, епаіпдАпд1е); 
сопіехі.зігоке (); 


ПРИМЕЧАНИЕ 


Метод агс () нельзя применять для рисования овала (вытянутого круга). Для этого 
нужно использовать либо более сложные методы для рисования кривых, которые рас- 
сматриваются далее в этой главе, либо применить трансформации, рассматриваемые 
в следующем, одноименном разделе. 


Три других метода рисования кривых — акгсТо(), Бег1егСагуетТо () И 
аџаагаёісСогуеТо () — могут быть несколько посложнее для тех, кто не в ладах 
с геометрией. Они основаны на принципе контрольных точек, т. е. точек, которые 
сами не являются частью кривой, но управляют ее формой. Наиболее известным 
типом таких кривых являются кривые Безье, которые используются практически в 
каждой программе рисования. Причиной популярности этого метода является его 
способность создавать плавные кривые, независимо от их размера. На рис. 6.6 по- 
казано, как контрольные точки управляют формой кривой Безье. 


Кривая Безье на рис. 6.6 создается следующим кодом: 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("агаміпдСапуаѕ"); 
уаг сопіехі = сапуаз.деіСопёехі ("24"); 


// Устанавливаем начало кривой. 


сопіехі .поуеТо (62, 242); 


// Создаем переменные для контрольных точек и конечной точки 
// и устанавливаем их значения. 

хаг сопіго11 х = 187; 

хаг сопіго11 у = 32; 

хаг сопіго12 х = 429; 

хаг сопіго12 у = 480; 

хаг епароіпіх = 365; 

уаг епароіпіҮ = 133; 


216 Часть 11. Создание современных веб-страниц 


Первая контрольная точка 
о 


Конечная точка 


Начальная точка 


о 


Вторая контрольная точка 


Рис. 6.6. Кривая Безье имеет две контрольные точки. Сначала кривая Безье идет параллельно прямой, 
соединяющей начальную точку и первую контрольную точку (т. е. по направлению 
к первой контрольной точке), отходя от нее по мере удаления от начальной точки и приближения 
к конечной точке. По мере приближения к конечной точке, кривая приближается к линии, соединяющей 
конечную точку и вторую контрольную точку (т. е. входит в конечную точку). Степень изгиба кривой 
между двумя точками определяется расстоянием до контрольной точки — чем она дальше, 
тем сильнее ее притяжение или, вернее, отталкивание 
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Рис. 6.7. На этой странице можно настраивать все аспекты кривой Безье, перетаскивая мышью ее точки. 
При перетаскивании точек страница генерирует их координаты, которые можно использовать 
для создания своей кривой. Подобную страницу для кривых второго порядка можно найти 
по адресу ћір://іпуии.сот/һћіті5диаагаїіс 
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// Рисуем кривую. 


сопеехе .рехіегСигуетТо (сопіго11 х, сопіго11 у, сопёго12 х, 
сопіго12 у, епаРо1пЕХ, епароіпіҮ); 


сопіехі.зігоке (); 


Контур сложной фигуры часто состоит из ряда дуг и кривых, соединяющихся друг 
с другом. По окончанию рисования всех составляющих можно вызвать метод 
с1оѕеРаєһ (), чтобы обвести или закрасить всю фигуру. Чтобы побольше узнать 
о кривых Безье, лучше поэкспериментировать с ними, а хорошую игровую площад- 
ку (рис. 6.7) можно найти вот по этому адресу: ћќёр://бёпуогі.сот/Љёті5ђеліег. 


Трансформации 


Трансформация — это прием рисования, позволяющий перемещать систему коор- 
динат холста. Допустим, нам нужно нарисовать один и тот же квадрат в трех мес- 
тах холста. Это можно сделать, вызвав метод Е111Вес®() три раза, каждый раз 
с другими координатами: 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("Чгам1п9Сапуаз") ; 


уаг сопіехі = сапуаз .чееСопбех® ("24"); 


// Рисуем квадрат размером 30х30 пикселов в трех разных местах. 
сопбехі.гесіё (0, 0, 30, 30); 

сопбехі.гесі (50, 50, 30, 30); 

сопіехі.гесі (100, 100, 30, 30); 


сопіехі.зігоке (); 


ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Рисование на холсте для тех, кто ненавидит математику 


У меня от математики болит голова. 
Можно ли рисовать фигуры без всех этих математических вычислений? 


Если вы планируете создавать на холсте захватывающую графику, но не желаете 
углубленно изучать геометрию, вам, может быть, придется немного разочароваться. 
К счастью, существует несколько способов, которые могут помочь вам рисовать тре- 
буемые фигуры, не беспокоясь о математических принципах в их основе. 


» Использовать библиотеку рисования. Зачем набивать себе шишки на лбу, если 
можно использовать готовую библиотеку для рисования кругов, треугольников, 
овалов и многоугольников за один прием? Идея простая — вызывается метод 
высшего уровня (скажем, #111Е11ірѕе (), которому передаются соответствующие 
координаты), и библиотека Јауа$сгірї преобразует все это в требуемую операцию 
на холсте. В качестве двух хороших примеров такой библиотеки можно назвать 
СапуаѕРіиѕ (ћр://соде.доодіе.сот/р/сапуаѕріиѕ) и А@зап /$ (Һір://айіѕапјѕ.сот). 
Но эти, и другие, библиотеки продолжают развиваться, поэтому еще рано гово- 
рить, какие из них выживут и окажутся пригодными для профессионального приме- 
нения. 


• Рисовать растровые изображения. Вместо того чтобы кропотливо рисовать каж- 
дую требуемую фигуру самому, можно скопировать в холст уже готовую графику. 
Например, изображение круга, сохраненное в файле формата РМС, можно вста- 
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вить в холст с помощью кода, рассматриваемого в разд. "Вставка в холст изо- 
бражений" главы 7. Но этот подход не позволит использовать гибкость при мани- 
пулировании изображением, например растягивать его, перемещать или удалять 


его части ит. п. 


• Использовать профессиональный инструмент. Для того чтобы манипулировать 
сложной графикой на холсте или сделать ее интерактивной, фиксированного рас- 
трового изображения будет недостаточно. Решением этой проблемы может быть 
средство преобразования, которое способно исследовать вашу графику и сгенери- 
ровать правильный код для применения с холстом. В этом отношении представля- 
ет интерес одно из таких средств — модуль Аі->Сапуаѕ для Адобе Шизгаюг 
(ВЫр:/\/зИптх.сотЛаб$/а!2сапуа$). Данный модуль преобразует созданную в 
Ааобе Шиз{гаюг графику в страницу НТМЕ с кодом Јаха$сгірї, который воспроизво- 
дит эту графику на холсте. 


Тот же квадрат в трех разных местах можно нарисовать, используя те же его коор- 
динаты, но сдвигая систему координат таким образом: 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("Чгам109Сапуаз") ; 


уаг сопіехі = сапуаз.деіСопёехі ("24"); 


// Рисуем квадрат с левым верхним углом в (0, 0). 
сопіехі.гесі (0, 0, 30, 30); 


// Сдвигаем систему координат вниз и вправо на 50 пикселов. 
сопіехі.ігапѕ1аїе (50, 50); 
сопіехі.гесї (0, 0, 30, 30); 


// Сдвигаем систему координат еще на 50 пикселов в каждом направлении. 
// Преобразования аккумулируются, поэтому точка (0, 0) 
// в действительности находится в точке (100, 100). 
сопіехі.ёгапѕ1аіе (50, 50); 
сопіехі.гесі (0, 0, 30, 30); 
сопіехі.зігоке (); 


Оба варианта кода дают одинаковый результат: рисуют три квадрата в трех разных 
местах холста. 


С первого взгляда может показаться, что трансформация делает немного сложную 
задачу рисования еще более сложной. Для обычных задач рисования может быть 
так оно и есть, но в некоторых особых ситуациях трансформация способна творить 
чудеса. Допустим, например, что у нас есть функция, рисующая последователь- 
ность сложных фигур, которые при сложении вместе образуют изображение 
птицы. Нам нужно анимировать это изображение, чтобы создать видимость полета 
птицы через экран. (Простой пример анимации на холсте рассматривается 
в разд. "Анимация на холсте" главы 7.) 


Чтобы реализовать эту задачу, не прибегая К преобразованию системы координат, 
нужно было бы корректировать каждую координату птицы при каждом ее переме- 
щении. Применение же трансформации позволяет использовать одни и те же коор- 
динаты в коде рисования птицы и просто сдвигать систему координат для каждого 
шага анимации. 
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Существует несколько разных типов трансформаций. В предыдущем примере мы 
использовали трансляцию, или перенос (фапз|айоп ігапѕѓогт), чтобы переместить 
начальную точку системы координат, т. е. точку (0, 0) в левом верхнем углу холста. 
Кроме трансляции, существуют такие трансформации, как масштабирование (ѕса]е 
ітапѕѓогт), которая позволяет рисовать в увеличенном или уменьшенном масштабе; 
вращение (тоже ігапѕѓогт), позволяющая вращать систему координат; и матричная 
трансформация (таблх ітапѕѓогт), позволяющая растягивать и сгибать систему ко- 
ординат практически как угодно при условии, что вы понимаете сложную матрич- 
ную математику в основе требуемых визуальных эффектов. 


Трансформации обладают эффектом аккумулирования. В следующем примере на- 
чало координат (т. е. точка (0, 0)) перемещается в точку (100, 100) посредством 
трансляции, после чего система координат поворачивается несколько раз на опре- 
деленный угол вокруг этой точки. При каждом вращении рисуется новый квадрат, 
создавая фигуру, показанную на рис. 6.8. 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("агаміпдСапуаѕ"); 
уаг сопіехіё = сапуаз.деіСопёехі ("24"); 


// Перемещаем точку (0, 0). Это важный шаг, 
// т. к. врашение выполняется вокруг этой точки. 
сопіехі.ігапѕ1аіе (100, 100); 


// Рисуем 10 квадратов. 

уаг соріез = 10; 

Ғог (уаг і=1; 1<сорлез; 1++) { 
// Прежде чем рисовать следующий квадрат, вращаем систему координат. 
// Угол полного оборота составляет 2*Маёһћ.РІ. Этот код вращает систему 
// координат для каждого нового квадрата лишь на долю этого угла, 
// выполняя полный оборот при рисовании последнего квадрата. 
сопфехе .гофабе (2 * Маёћ.РІ * 1/ (сор1ез-1)); 


// Рисуем квадрат. 
сопіехі.гесіё (0, 0, 60, 60); 
} 


сопбехе.зегоке (); 


СовеТ 


С помощью метода контекста за\е () можно сохранить текущее состояние системы 
координат и восстановить его позже посредством метода геѕіёоге (). Сохраняйте со- 
стояние контекста перед тем, как применять трансформацию, чтобы в случае ошибки 
можно было восстановить систему координат. А при рисовании сложных фигур, тре- 
бующих длинной последовательности шагов, разумно сохранять состояние как много 
чаще. Этот список сохраненных состояний действует подобно истории посещенных 
веб-страниц. При каждом вызове метода геѕіоге () система возвращается в непо- 
средственно предшествующее состояние. 


Более углубленное рассмотрение предмета трансформаций выходит за рамки этой 
книги. Если же вы желаете исследовать этот предмет более подробно, можете най- 
ти полезную документацию и примеры на сайте ВИр://Итуш.сот/ 74204. 
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Рис. 6.8. Результат рисования последовательности квадратов с одними и теми же координатами 
но с системой координат, вращающейся вокруг одной точки 


Прозрачность 


До сих пор мы имели дело с чистыми цветами. Но холст также позволяет приме- 
нять частичную прозрачность, чтобы накладывать одну фигуру поверх другой. Су- 
ществуют два способа использования прозрачности. Первый позволяет установить 
цвет, присвоив значения свойству #і115+уІе ИЛИ зігокеѕёу1е и используя функцию 
гора (), а не более распространенную функцию гор (). Функция гора () принимает 
три параметра — значения красной, зеленой и синей цветовых составляющих (от 0 
до 255) и дополнительное значение альфа (от 0 до 1), которое указывает прозрач- 
ность цвета. Значение альфа, равное 1, соответствует полной непрозрачности, а 
значение, равное 0 — полной прозрачности. Установив значение альфа между эти- 
ми двумя пределами (например, 0,5), мы получим частично прозрачный цвет, по- 
зволяющий просматривать любое находящееся под ним содержимое. 


ПРИМЕЧАНИЕ 


Местонахождение содержимого — снизу или сверху — определяется порядком опера- 
ций рисования. Например, если в одном и том же месте сначала нарисовать круг, а 
потом квадрат, квадрат будет наложен на круг. 


В следующем листинге приведен код для рисования круга и треугольника. Обе фи- 
гуры закрашиваются одним и тем же цветом, только для треугольника значение 
альфа устанавливается равным 0,5, делая его на 50% прозрачным. 


уаг сапуаз = аосипепіё .деіЕ1етепіВута ("агаміпдСапуаѕ"); 
уаг сопіехі = сапуаз.деіСопёехі ("24"); 


// Устанавливаем цвета заливки и очертаний. 
сопіехі.Ёі115іуІе = "гдр (100,150,185)"; 
сопіехі.Ііпейіаёһ = 10; 
сопіехі.ѕігокебіу1Іе = "геа"; 
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// Рисуем круг. 
сопіехі.агс (110, 120, 100, 0, 2*Маёһ.РІ); 
сопіехі.Еі11(); 
сопёіехі.зігоке () ; 


// Не забудьте вызвать метод редіпРаіёћ () перед тем, 
// как рисовать новую фигуру. 


// В противном случае фигуры могут быть совмещены. 
сопіехі .редіпрРаїћ (); 


// Заполняем треугольник прозрачным цветом. 
сопіехі.Ёі115іуІе = "гофа (100, 150,185,0.5)"; 


// Теперь рисуем треугольник. 
сопіехі .тоуеТо (215,50); 
сопіехі.1іпеТо (15,250); 
сопіехі.1іпеТо (315,250); 
сопёіехі.с1озѕерРаіћ (); 
сопіехі.Еі11(); 
сопіехі.зігоке () ; 


Результаты выполнения кода показаны на рис. 6.9. 


Рис. 6.9. Слева: две фигуры, закрашенные сплошным цветом, треугольник наложен поверх круга. 
Справа: круг закрашен сплошным цветом с наложенным полупрозрачным треугольником. 
Полупрозрачные фигуры выглядят светлее (т. к. они пропускают сквозь себя белый фон) и позволяют 
видеть расположенное под ними содержимое. Обратите внимание, что в этом примере полупрозрачный 
треугольник имеет полностью непрозрачные границы 


Другой способ использования прозрачности — установить значение свойства кон- 
текста с1ора1А1Ірћһа, как показано в следующем коде: 


сопіехі.д1ора1А1рћһа = 0.5; 

// Теперь этому цвету автоматически присваивается значение альфа, 
// равное 0,5 

сопіехі.Ғі115іу1Іе = "гар (100,150,185)"; 


После этого вся графика будет иметь одинаковое значение альфа и одинаковый 
уровень прозрачности, пока значению о1ора1А1рћа не будет присвоено новое значе- 
ние. Это включает как цвета очертаний (свойство ѕігокеѕіу1е), так и цвета заливки 
(свойство #11156 у1е). 


Какой из этих подходов лучше? Если требуется один прозрачный цвет, используйте 
функцию гора (). А если требуется нарисовать несколько фигур разного цвета, но 
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с одинаковым уровнем прозрачности, используйте свойство с1ора1А1рћа. Свойство 
с1ора1А1рһа также полезно в том случае, когда нужно рисовать полупрозрачные 
изображения на холсте (см. разд. "Вставка в холст изображений" главы 7). 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
Составные операции 


До сих пор мы полагали, что при наложении одной фигуры поверх другой верхняя 
фигура рисуется поверх нижней, скрывая ее. В большинстве случаев так оно и есть, 
но холст также поддерживает более сложные составные операции. 


Составная операция — это правило, указывающее холсту, каким образом отображать 
два перекрывающихся изображения. Составной операцией по умолчанию является 
операция зоихсе-о\уех (источник сверху), при которой вторая фигура рисуется поверх 
первой. Но возможны и другие типы составных операций. Например, операция хог не 
показывает ничего в области перекрытия изображений. На рис. 6.10 показаны резуль- 
таты применения составных операций рисования. 


Тип используемой холстом составной операции меняется посредством присвоения 
соответствующего значения свойству контекста с1ора1 СотроѕіёеОрегаёіоп: 


сопіехі .од1ора1СопроѕіёеОрегаїіоп = "хог"; 


При умелом применении составные операции могут значительно сократить опреде- 
ленные процедуры рисования. К сожалению, среди браузеров нет согласия, как ото- 
бражать эти операции, в результате чего некоторые составные операции отображают- 
ся по-разному на различных браузерах. Дополнительную информацию об этой про- 
блеме и сравнение отличий в отображении составных операций см. в блоге по адресу 
ВЕр:/Атуии.сот/6862пт2. 


әсә 
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Рис. 6.10. Разные типы составных операций рисования, как они отображаются в браузере Еігеѓох. 
Браузеры Іпќегпеї Ехр/огег 9 и Орега обрабатывают операцию сору иначе, а браузеры Сһготе 
и Ѕаѓагі обрабатывают по-разному операции зоигсе-1п, зоигсе-ой&, деѕзііпабіоп-іп 
и Ӣезііпаёбіоп-аіор 
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Создание простой программы рисования 


Кроме рассмотренных, холст имеет много других возможностей. Но на данном эта- 
пе вы обладаете достаточным объемом знаний, чтоб создать простою программу 
рисования на основе холста (рис. 6.11). 


Г Е 
9) слнтмі5\сһар О > б х Е р для 
- РЕМ СОК - - РЕМ ТНІСКМЕЅЅ - 


ОКХ © 


А7 


- ОРЕКАТІОМ - 


Зауе {пе Сапуаз Сіеаг пе Сапуа$ 


Рис. 6.11. Для работы с этой программой рисования выберите цвет и толщину линии, 
а потом рисуйте с помощью мыши 


Код Јауа$сгірі для этой программы более объемный, чем в предыдущих примерах, 
но все равно на удивление простой. Мы рассмотрим эту программу по частям в 
следующих разделах. 


СОВЕТ 


Если вы хотите знать правила таблицы стилей, с помощью которых создаются панели 
инструментов вверху и внизу поля для рисования, или желаете исследовать весь код 
примера, или просто хотите сразу же испытать программу на практике, все это можно 
сделать с помощью файла Раіпі.Мті на сайте этой книги (мам\.ргоѕеќесһ.сот/һті5). 


Подготовка к рисованию 


При загрузке страницы код получает объект холста сапуаз и подключает к нему 
функции для обработки нескольких событий ЈауаЅстірі для разных движений 
МЫШИ: опМоч5ероип, опМоизе0р, опМоцџѕебиоі И опМоц5еМотхе. (Как мы увидим далее, эти 


224 Часть 11. Создание современных веб-страниц 


события управляют процессом рисования.) В то же самое время страница сохраняет 
холст в глобальной переменной сапуаз, а контекст рисования — в другой глобаль- 
ной переменной, сопеехе. Таким образом, эти объекты будут доступны для осталь- 
ного кода: 


уаг сапуазѕ; 


хаг сопіехі; 


міпаои.оп1оаа = Ёопсііоп () { 


// Получаем объект холста и контекст рисования. 


сапуаз = аосотепі .деіЕ1етепЕВуІа ("Яахам1паСапуаз") ; 
сопіехі = сапуаз .деЕСопіехі ("24"); 


// Подключаем требуемые для рисования события. 
сапуаз .оппоџзѕзеаоип = зёбагіргамніпд; 

сапуа$ .оптоџѕеџр = зіорргаміпд; 

сапуаз .опмоцзеоиЕ = зіорргаміпд; 

сапуа$ .опмоизетоуе = гам; 


}; 


Чтобы начать рисовать, пользователь выбирает цвет и толщину линии, щелкнув по 
требуемым значкам в панели инструментов вверху окна рисования. Эти панели ин- 
струментов создаются с помощью простых элементов <аіу>, отформатированных 
под светло-голубой фон и содержащих по несколько элементов <іто>, активизи- 
руемых щелчком мыши. Например, код, создающий панели инструментов для вы- 
бора цвета, выглядит так: 


<аіу с1азѕ="Тоо1раг"> 
— Реп Со1ог -<рг> 
<іпо іа="хгеаРеп" згс="реп ге@.91Е" а1ё="Кеа Реп" 
опс1іск="сһапдеСо1ог (' гор (212,21,29)', +һћіѕ) "> 
<іпо іа="дгеепРеп" згс="реп дгееп.діғ" а1б="Сбгееп Реп" 
опс1іск="сһапдеСо1ог (' гор (131,190,61)', +һіѕ) "> 
<іпо 1а="р1аеРеп" згс="реп рІџе.діғ" а1="В1ае Реп" 
опс11ск="срапаесСоТохг (' гор (0,86,166)', (513) "> 
</аіу> 


Важной частью этой разметки является атрибут опсііск элемента <іто>. При щелч- 
ке пользователя по значку ручки определенного цвета элемент <іпо> вызывает 
функцию свапдеСо1ох (). Эта функция принимает два параметра — новый цвет, ко- 
торый совпадает с цветом выбранного значка, и ссылки на элемент <іто>, по кото- 
рому щелкнули. Код функции выглядит так: 


// Отслеживает элемент <1иа>, по которому ранее щелкнули, для цвета. 


уаг ргеуіооѕСо1огЕІетмепі; 


Ғипсііоп сһапдеСо1ог (со1ог, іпдЕ1етепё) { 
// Меняем текущий цвет рисования. 
сопіехі.ѕігокебіу1Іе = со1ог; 
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// Меняем стиль элемента <іюсд>, по которому щелкнули, для цвета. 


ітдЕ1Іетепіё.с1ІаѕѕМате = "бе1есфеа"; 


// Возвращаем ранее элемент <1та>, по которому ранее щелкнули, 


// в нормальное состояние. 


1Е (ргеуіоцѕСо1ІогЕ1етепі != пи11) ргеуіоицзСо1огЕ1емепі.с1азѕћатпе = ""; 


ргеуіоцзсСо1ІогЕ1Іепепі = іпдЕ1Іепепі; 


Код функции сһапдесо1ог () выполняет две основные задачи. Во-первых, он уста- 
навливает свойство контекста ѕегокебіу1Іе В значение соответствующего нового 
цвета. Для этого требуется всего лишь одна строка кода. Во-вторых, код изменяет 
оформление элемента <1та>, по которому щелкнули, заключая его в рамку, чтобы 
было видно, какой цвет является текущим. Выполнение этой операции требует 
больше работы, Т. К. необходимо отслеживать цветовой элемент <іто>, по которому 
ранее щелкнули, чтобы удалить его рамку. 


Функция сһапдетһіскпеѕѕ () выполняет почти идентичную работу, только она изме- 
няет значение свойства контекста 1і пені аєһ в соответствии с выбранной толщиной 
ЛИНИИ: 


// Отслеживаем элемент <1иа>, по которому ранее щелкнули, 


// для толщины линии. 


уаг ргеуіооѕТһіскпезѕЕ1етмепі; 


Ғипсііоп сһапдетһіскпезѕѕ (іһіскпеѕз, ітоЕ1етмепі) { 
// Изменяем текущую толщину линии. 


сопіехі.1іпейіаёһ = &һіскпеѕѕ; 


// Меняем стиль элемента <1та>, по которому шелкнули, для толщины цвета. 


іпЕ1Іетепё.с1ІаѕѕМапе = "бе1есфеа"; 


// Возвращаем элемент <іпод>, по которому ранее щелкнули, 
// для толщины линии в нормальное состояние. 
1Е (ргеуіоцѕТһіскпеѕѕЕ1емепё != пи11) { 


ргеуіоиѕтТһіскпеѕззЕ1емепі.с1аѕзѕМапе = ""; 


} 


ргеуіоизтТһіскпеѕѕЕ1етмепі = іпЕ1Іепепі; 


} 


Рассмотренный выше код подготавливает холст для рисования, но рисовать еще 
рано. Для этого нужно добавить код, который собственно выполняет рисование, 
что и делается в следующем разделе. 


Рисование на холсте 


Процесс рисования начинается, когда пользователь щелкает мышью по холсту. Для 
отслеживания, когда осуществляется рисование, в программе используется гло- 
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бальная переменная іѕргакіпо, информирующая остальной код программы, можно 
ЛИ работать с контекстом рисования. 


Как мы видели ранее, событие опмоџѕероюп связано с функцией ѕбагёргаюіпа (). Эта 
функция устанавливает переменную 1$Рхамзпа, создает новый путь, а потом уста- 
навливает начальную позицию рисования, подготовив таким образом холст для ри- 
сования: 


уаг 1$Ргам1па = Ға1ѕе; 


Ғипсііоп зёагіргаміпа (е) { 
// Начинаем рисовать. 


іѕргаміпд = ёгџое; 


// Создаем новый путь (с текущим цветом и толщиной линии). 
сопіехі .редіпрРаїћ (); 


// Нажатием левой кнопки мыши помещаем "кисть" на холст. 


сопіехі .моуеТо (е.радехХ-сапуаѕ.оЁЁѕеї Іеғі, е.радеҮ-сапуаѕ.оЁЁзѕеіТор); 


} 


Чтобы наша программа работала корректно, рисование должно начинаться в теку- 
щей позиции, т. е. там, где находится указатель мыши, когда пользователь нажима- 
ет левую кнопку. Но задача получения правильных координат этой точки несколь- 
ко сложновата. 


Событие оһпмМоџзероютп предоставляет координаты курсора мыши (через свойства 
рачех И раде, показанные в этом примере), но это координаты относительно всей 
страницы. Чтобы вычислить соответствующие координаты холста, необходимо от 
координат левого верхнего угла окна браузера отнять расстояние до левого верхне- 
го угла холста. 


Собственно рисование происходит, когда пользователь двигает мышь, удерживая 
нажатой левую кнопку. При каждом перемещении мыши, даже на один пиксел, 
активируется событие опмоџзеМоуе и исполняется код функции агам (). Если пере- 
менная ізргакіпо установлена, код вычисляет текущие координаты холста (т. е. ко- 
ординаты точки, в которой В данный момент находится указатель мыши), а потом 
вызывает метод 1іпето (), который добавляет путь соответствующего отрезка ли- 
нии, после чего вызывается метод ѕігоке (), который прорисовывает эту линию: 


Ғипсііоп агам (е) { 
1Е (іѕргаміпд == ёгице) { 


// Определяем текущие координаты указателя мыши. 


уаг х = е.радех — сапуаз.оЕЕзе еее; 


уаг у = е.радеу — сапуаз.оЕЕзее Тор; 
// Рисуем линию до новой координаты. 
сопіехі.1іпеТо (х, у); 
сопіехі.зЕгоке (); 
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Если пользователь продолжает перемещать мышь, снова вызывается функция 
агам (), ОПЯТЬ добавляя отрезок к уже нарисованной линии. Этот отрезок настолько 
короткий == ДЛИНОЙ всего лишь в один или два пиксела, что он даже не выглядит, 
как прямая линия в начале рисования. 


Наконец, когда пользователь отпускает кнопку мыши или выводит курсор за пре- 
делы холста, срабатывает событие опмоџѕеур или опмМоџѕеоџь соответственно. Оба 
эти события активируют функцию ѕіорргаиіпо (), которая указывает приложению 
прекратить рисование: 


Ғипсііоп зборргам1та() { 


1$Охам1па = Ёа1ѕе; 


На данном этапе мы рассмотрели все аспекты рисования. Теперь перейдем К обсу- 
ждению функций очистки холста или сохранения созданного рисунка. Для этих 
целей предназначены две кнопки на панели инструментов ОрегаНоп$ внизу хол- 
ста — СІеаг Фе Сапуаѕ и Ѕауе Фе Сапуаѕ соответственно. Нажатие кнопки Чеаг 
е Сапуаѕ вызывает функцию сІеагСапуазѕ (), которая полностью очищает поверх- 
ность холста с помощью метода контекста сіеагВес+ (): 


Ғопсёіоп с1еагСапуаз () { 
сопіехі.сІеагКесі (0, 0, сапуаѕ.міаёһ, сапуаѕ.һеідћі) ; 


} 


Операция сохранения содержимого холста более сложна, и мы посвятим ей отдель- 
ный раздел. 


Сохранение содержимого холста 


Задача сохранения содержимого холста требует рассмотрения множества опций. 
Прежде всего, нужно решить, каким образом получить данные рисунка. Для реше- 
ния этой задача холст предоставляет три возможных подхода. 


П Использовать ОКІ, данных. При этом подходе содержимое холста преобразу- 
ется в файл изображения, которое потом переводится в последовательность 
символов, оформленных в виде ОВГ. Это позволяет получить аккуратный и 
компактный способ для перемещения данных изображения (например, его мож- 
но передать элементу <іто> и отослать на веб-сервер). В нашей программе рисо- 
вания используется этот подход. 


О Использовать метод деёттадераќба (). Этот подход позволяет получить "сырые" 
пиксельные данные, которыми можно потом манипулировать как угодно. Этот 
подход рассматривается в разд. "Проверка на столкновение с использованием 
цвета пикселов" главы 7. 


П Сохранять список "шагов". Например, можно организовать массив, содержа- 
щий список всех линий, нарисованных на холсте. Эти данные можно потом 
сохранить и использовать для воспроизведения изображения. Данный подход 
требует меньше места для хранения изображения, а также предоставляет боль- 
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шую гибкость для последующей работы с ним. К сожалению, для этого нужно 
отслеживать все выполняемые шаги, используя метод, который рассматривается 
в разд. "Отслеживание нарисованного содержимого" главы 7. 


Если все это кажется слегка пугающим, это еще не все. Определившись с типом 
содержимого для сохранения, нужно решить, где это содержимое сохранить. Воз- 
можны, среди прочих, следующие опции. 


О В файле изображения. Например, содержимое холста сохраняется в виде файла 
формата РМО или ЈРЕС на локальном жестком диске художника. Это подход, 
который применяется в нашей программе рисования, и мы его рассмотрим далее 
в этом разделе. 


П Влокальной системе хранения. Работа этого подхода рассматривается в главе 9. 


П На веб-сервере. После передачи данных веб-серверу последний может сохра- 
нить их в файле или базе данных и предоставить при следующем посещении 
страницы пользователем. 


Для сохранения содержимого холста в нашей программе рисования применяется 
возможность, которая называется (КЁ данных (даа ОКІ). Чтобы получить ОКІ 
для текущих данных, мы просто используем метод холста єорабаукі (): 


уаг игі = сапуаз .борафа0В\ (); 


Если вызвать метод +орабауві (), не передав ему никаких параметров, то получим 
изображение в формате РМО. Альтернативно, методу можно указать требуемый 
формат изображения: 


хаг ик1 = сапуаѕ.ёораёауві ("іпмаде/јред"); 


Но если браузер не может предоставить требуемый формат, он опять выдаст изо- 
бражение в формате РМС, преобразованное в длинную строку. 


Что же собой представляет ОВІ. данных? Технически это просто длинная строка 
символов, закодированных алгоритмом Вазеб4, которая начинается с текста: 
Чата: 1таде/рра;Ъазе64. Это выглядит как бессмыслица, по крайней мере, для лю- 
дей, т. к. эти данные предназначены для понимания компьютерными программами, 
например браузерами. ОВГ, данных для содержимого холста на рис. 6.11 выглядит 
таким образом: 

ааба: ітаде/рпа; раѕеб4, 1УВОВиОКСаоААААМЗ ОРЕОЗАААЕОАААЕ САУАААА1ОНТАААААХМ$ВОТАг 


$4сбОААААВпоП1 ВААСх) му8УОЦЧААСАВЗОВВУНВе 721рКВ1Несап5ахЕЕ А ЕИОпзЗЕЕС11емп29КзуИЬ 
х7ХМвИ9оа2ОКВознНУК. ..ЗААЕТОААСЕТВА1АТ+НхАУреарЕК1еАААААЕ1 ЕТК5аОмсс 


Следует заметить, что с целью экономии книжного пространства, в этом примере 
ОВ, данных пропущена огромная часть данных в средине, представленная много- 
точием. В полном виде ОВ, данных этого примера занял бы пять страниц книги. 


ПРИМЕЧАНИЕ 


Алгоритм кодирования Ваѕеб4 преобразует данные изображения в длинную последо- 
вательность букв, цифр и некоторых специальных символов. Знаки пунктуации и не- 
обычные расширенные символы не используются, в результате чего эти данные мож- 
но без проблем вставлять в веб-страницы (например, чтобы установить значение 
скрытого поля ввода или атрибут экс элемента <ілор). 
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5) «> 8) раіпьћіті р- эх |2 Рай" у Ут $ 
- РЕМ СООК - - РЕМ ТНІСКМЕЅ5 - 


АААХ 


- ОРЕКАТІОМ - 


Сіеаг ће Сапуаз 


АІСНТ-СИСК ТО ЅАМЕ ... 


Рис. 6.12. Данные изображения из холста передаются в элемент <іто> с помощью ОВЕ. 

Поле элемента <іто> сделано меньшего размера, чтобы изображение в нем отличалось от основного 
изображения на холсте. Чтобы сохранить это изображение в файл формата РМС, просто щелкните 
на нем правой кнопкой мыши и в контекстном меню выберите команду Сохранить картинку как, 
точно так же, как и для сохранения изображения из обычной веб-страницы 


Таким образом, задача преобразования данных изображения в ОВГ, данных не 
представляет никаких трудностей. Но что можно делать дальше с этим ОКІ дан- 
ных? Можно отправить его на веб-сервер для длительного хранения. Пример вы- 
полнения этой операции с помощью кода РНР представлен на веб-странице 
ћер:/бпуогі.сот/50иод9ор. 


Но возможности для сохранения данных на стороне клиента несколько ограничены. 
Некоторые браузеры позволяют перейти непосредственно к ОВГ, данных. Это озна- 
чает, что для перехода к изображению можно использовать следующий код: 


міпаом.1осаёіоп = сапуаѕ.іораћаукі (); 


Более надежным методом будет передать ВЕ данных в элемент <ітор>, что и дела- 
ет наша программа рисования: 
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Ғопсёіоп ѕауеСапуаѕ () { 


// Находим элемент <ітдр>. 


уаг 1тадеСору = Чосимеп® .деіЕ1епепіВуІа ("зауеЯТтадеСору") ; 


// Отображаем данные холста в элементе <ітар>. 


ітадеСору.ѕгс = сапуаѕ.іораёа0кі (); 


// Показываем элемент <аіу>, содержащий элемент <ітд>, 


// делая изображение видимым. 


уаг іпасдеСопіаіпег = аоситепі . ееЕ1етепЕВуТа ("зауеасоруСопіёаіпег"); 


ітадеСопіёаіпег.ѕіу1Іе.дізріау = "р1оск"; 


Этот код не совсем сохраняет данные изображения, т. к. изображение еще не со- 
хранено в файле. Но для этого требуется всего лишь один шаг — просто щелкнуть 
правой кнопкой мыши по уменьшенному изображению в панели под холстом и 
в открывшемся контекстном меню выбрать команду Сохранить картинку как. 
Это не так удобно, как закачка файла или диалоговое окно Сохранить, но единст- 
венный способ, который надежно работает во всех браузерах. 


ПРИМЕЧАНИЕ 


Браузер Ғігеѓох имеет встроенную возможность сохранения содержимого холста. Для 
этого щелкнуть правой кнопкой нужно не на копии изображения в панели под холстом, 
а на самом изображении в холсте, и в открывшемся контекстном меню выбрать 
команду Сохранить как. 


ПРИМЕЧАНИЕ 


Возможность ОВІ данных является одной из возможностей холста, которая может не 
работать при открытии страницы с локального жесткого диска. Во избежание этой 
проблемы, для тестирования своей работы следует выгрузить ее на веб-сервер. 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Программы рисования на холсте, доступные в Интернете 


Программа рисования — это первое, что приходит на ум многим людям, когда они на- 
чинают применять на практике свои знания программирования холста. Поэтому не- 
удивительно, что с помощью Сооде в Интернете можно найти большое число таких 
программ, и некоторые из них на удивление продвинутые'. В качестве примера, можно 
назвать программы рисования на следующих веб-сайтах: 


• үгу. јѕугіадеї.сот/іпаех-іраіпі.ћїіті. Более продвинутая программа рисования, 
с панелью инструментов наподобие ленты Мсгозой \Мога 2010. По завершению 
этого эксперимента его автор планирует приступить к разработке клона АдоБе 
Рһоїоѕһор в браузере; 


• һіїр://тидіид.сот/ѕКеїсһраа. Программа для рисования и черчения, изобилую- 
щая разнообразными эффектами и продвинутыми возможностями, такими как ма- 


! Программы рисования можно найти и в русскоязычном секторе Интернета. Наберите в поисковой 
системе фразы вроде "графический редактор онлайн на НТМГ.5" или "графический редактор интерак- 
тивный в НТМІ5", и вы сразу увидите ссылки на соответствующие веб-страницы. — Ред. 
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нипулирование изображениями, выделение прямоугольником и рисование спиро- 
графов'. В настоящее время эта программа не работает ни на одной из версий 
Ітіегпеї ЕхріІогег. 


Совместимость холста с браузерами 


На данный момент мы многое узнали о холсте и многому научились. Настало вре- 
мя сделать шаг назад и ответить на вопрос, который дамокловым мечом висит над 
каждой новой возможностью НТМГ5: насколько безопасно использование этой 
возможности? 


К счастью, холст является одной из наиболее поддерживаемых возможностей 
НТМІ5. Она поддерживается всеми последними версиями основных браузеров 
(табл. 6.1). Конечно же, чем выше версия браузера, тем выше уровень поддержки, 
т. к. в более новых версиях браузеров увеличивается скорость прорисовки и ис- 
правляются ошибки. 


Е 6.1. И холста основными Е и 


|= _ Спготе — Орега _ Апагоід | 


Минимальная 10 
версия 


Вряд ли вам придется столкнуться с более старой версией любого из этих браузе- 
ров, за исключением Іпѓетпеѓ ЕхрІогег. Но это одно исключение ставит использую- 
щих холст разработчиков перед вопросом: как можно использовать холст в веб- 
страницах так, чтобы не лишать возможности просматривать подобные страницы 
пользователей старых, но все еще популярных версий этого браузера, таких как 
ІЕ 8и 1Е7? 


Как и в случае со многими другими возможностями НТМІ 5, к решению этой про- 
блемы совместимости есть два подхода. Первый — определять отсутствие под- 
держки холста браузером и пытаться использовать другое решение. А второй под- 
ход — закрыть этот пробел другим инструментом, способным эмулировать холст 
НТМГ5, чтобы страницы работали без изменений на старых браузерах. В случае 
холста второй подход неожиданно оказывается лучшим, как мы увидим в следую- 
щем разделе. 


Холст на заполнителе 


Чтобы позволить старым версиям Ниегпе{ Ехрогег работать с холстом, существует 
несколько надежных резервных решений. Одним из таких решений является биб- 
лиотека ЕхрІогегСапуаѕ (также называется ехсапуаѕ), разработанная инженером из 


| См. ћр://ги.уікірейіа.огр/уік/Спирограф (игрушка). — Прим. пер. 
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Ооое и гением ЈауаЅсгірі Эриком Арвидссоном (ЕйК Агуійѕѕоп). Эта библиотека 
эмулирует холст в Пете! ЕхрІогег 7 и 8, используя только ЛауаЗ спреи устаревшую 
в настоящее время технологию УМГ (Уесюг Магкир Гапоџаре, язык векторной 
разметки). 


ПРИМЕЧАНИЕ 


УМЕ представляет собой спецификацию для создания штриховых рисунков и другой 
графики в документе НТМЕ с использованием разметки. Эта технология была замене- 
на похожим, но с лучшим уровнем поддержки, стандартом 5\6 (ЅсаіаЫе \Месюг 
Сгарһісѕ, масштабируемая векторная графика), который браузеры только начинают 
поддерживать. В настоящее время технология УМІ все еще продолжает использо- 
ваться в нескольких продуктах корпорации Мсгозо8, таких как Мсгозой Оҝћсе и Ищете! 
Ехр!огег. Это позволяет использовать ее в качестве достаточно приемлемого замени- 
теля холста, хотя и с некоторыми ограничениями. 


Последнюю версию библиотеки ЕхрІогегСапуаѕ можно загрузить по адресу 
Ббфр://соде.гоофе.сот/р/ехрогегсапуа$. Скопируйте файл ехсапуа$з.]з в папку веб- 
страницы и добавьте в веб-страницу следующую ссылку на этот файл: 


<Һеаа> 
<Е1Е1е>...</&11е> 
<1--[1# 1% ТЕ 9]> 
<ѕсгірё ѕгс="ехсапуаѕ.ј5"></ѕсгірё> 
<1[епаі#] --> 


<һеаа> 
Обратите внимание, что эта ссылка является условной. Версии Іпќегпеї ЕхріІогег 


более ранние, чем ГЕ 9, будут использовать ее, но ГЕ 9 и другие браузеры не будут 
вообще обращать на нее внимания. 


Теперь элемент <сапуаѕ> можно использовать без особых проблем. Например, эта 
библиотека — все что требуется, чтобы наша программа рисования (см. разд. "Соз- 
дание простой программы рисования" ранее в этой главе) работала в старых вер- 
сиях Іпќегпеѓ Ехр]огег. 


ПРИМЕЧАНИЕ 


Для работы на холсте с текстом (см. разд. "Вставка в холст текста" главы 7) нужна 
еще одна библиотека Јауа$сгірї — Сапуаѕ-іехї, которая работает совместно с библио- 
текой Ехр!огегСапуаз. Загрузить эту библиотеку можно по адресу Һір://соде. 
доодІе.сот/р/сапчаѕ-їехі. 


К сожалению, библиотека ЕхрІогегСапуаѕ — не совсем идеальное решение. Если вы 
попытаетесь использовать более сложные приемы рисования, существует вероят- 
ность, что некоторые детали не будут выглядеть так, как вы ожидаете. Основные 
возможности, не поддерживаемые в Ехр|огегСапуа$ (на момент написания этой 
книги, в любом случае), включают радиальные градиенты, тени, обрезку изображе- 
ний, обработку "сырых" пикселов, а также ОВГ, данных. 


Для по-настоящему амбициозных задумок, например сложных анимаций или игр 
с горизонтальной прокруткой экрана (ѕ1йе-ѕсгоШпе), ЕхрІогегСапуаѕ может оказаться 
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недостаточно быстрой. В такой ситуации следует рассмотреть возможность приме- 
нения другого заполнителя, использующего высокопроизводительный модуль рас- 
ширения, такой как 511уегіеһ или Е1аѕһ. Исследовать доступные опции можно на 
странице заполнителей по адресу ћќр://іпуогі.сот/роіуё15. Или же сразу исполь- 
зуйте лучший из них — бесплатную библиотеку Е1аѕћСапуаѕ, которую можно за- 
грузить по адресу Һќёр://соде.сооғЈе.сот/р/Паѕһсапуаѕ. Подобно библиотеке 
ЕхрІогегСапуаѕ, эту библиотеку можно подключить к веб-странице с помощью 
одной строки кода ЛауаЗсире. Но в отличие от ЕхрІогегСапуаѕ она использует 
модуль Е1аѕһ, без малейшего следа УМГ. 


Библиотека ЕІаѕҺСапуаѕ также имеет и профессиональную коммерческую вер- 
сию — Е1аѕћСапуаѕ Рго (һр:/Паѕһсапуаѕ.пеі/ригсһаѕе). Эта версия предоставляет 
еще лучший уровень поддержки холста, который, согласно результатам тестирова- 
ния браузерной совместимости, примерно такой же, как и уровень поддержки хол- 
ста большинством основных браузеров. Сравнить уровень браузерной поддержки, 
предоставляемой этими тремя разными библиотеками —  ЕхрогегСапуаз, 
ЕІаѕһСапуаѕ и ЕаѕҺСапуаѕ Рго — можно по адресу В@р://Ма$Всапуа$.пе/4ос$/ 
сапуаѕ-арі. 


ПРИМЕЧАНИЕ 


Совместив на странице возможности холста и библиотеки наподобие НаН$Сапуаз, вы 
получите действительно замечательную поддержку практически всех браузеров, из- 
вестных человечеству в настоящее время. Таким образом, вы обеспечите поддержку 
не только для немного устарелых версий \{егпе{ Ехрогег, посредством использования 
ЕІаѕһ, но также и для мобильных устройств, не использующих РИазВ, таких как {Рад и 
іРһопе, с помощью НТМІ5. 


Резервное решение для холста 
и определение возможностей 


Самый популярный способ расширить доступность страниц, использующих 
холст — это применить библиотеки ЕхрІогегСапуаѕ и Е1ІаѕћСапуаѕ. Но они не явля- 
ются единственными возможными опциями. 


Как и элементы <аџаіо> и <уідео>, элемент <сапуаз> поддерживает резервное со- 
держимое. Например, следующая разметка позволяет либо использовать холст 
(если он поддерживается браузером), либо выводить изображение (если холст не 
поддерживается): 


<сапуаз іа="1одоСгеаіог" міаёһ="500" һҺеісһі="300"> 
<р>Ваш компьютер не поддерживает возможности холста, 
поэтому вы не можете использовать наш генератор 
динамических логотипов.</р> 


<іпо згс="1одо.рпод" а1="Стандартный логотип компании"> 


</сапуаѕ> 


Но этот метод редко бывает полезным. В большинстве случаев холст используется 
для рисования динамической графики или для создания какого-либо интерактивно- 
го приложения, для которых статическое изображение не будет удовлетворитель- 
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ным заменителем. Одно из альтернативных решений — вставить в элемент 
<сапуаз> приложение НИазП. Этот подход особенно хорош в тех случаях, когда уже 
имеется Е1аѕһ-версия страницы, но на перспективу к ней нужно добавить возмож- 
ности холста. Он предлагает работоспособное Н1азВ-решение для старых версий 
Іпѓегпеі ЕхрІогег и в то же время позволяет остальным браузерам использовать 
холст без модулей расширения. 


При использовании Модегитг (см. разд. "Определение возможностей с помощью 
Модаеги2т" главы 1) можно проверить поддержку холста браузером с помощью 
Јауа$сгірё. Для проверки на поддержку рисования нужно исследовать значение 
свойства Модегп1тг.сапуаз, а работы с текстом — свойства мМодегпігг.сапуазіёехі. 
В случае если браузер не поддерживает возможности холста, можно использовать 
любое резервное решение, которое вам по душе. 


ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Доступность холста 


Можно ли повысить доступность холста? 


Одной из ключевых тем НТМІ 5, семантических элементов и нескольких предыдущих 
глав является доступность, т. е. разработка веб-страниц, которые предоставляют ин- 
формацию для вспомогательных программ для пользователей с ограниченными воз- 
можностями. И сейчас, может быть, трудно поверить в то, что для одной из основных 
новых возможностей НТМЕ5 не существует ни семантики, ни модели доступности во- 
обще. 


Создатели НТМІ5 работают над восполнением этого недостатка. Но ни у кого нет 
твердой уверенности в том, какое решение может быть лучшим. В одном из возмож- 
ных решений предлагается создавать отдельный документ для вспомогательных уст- 
ройств, который бы отображал содержимое холста другими средствами. Проблема с 
этим предложением заключается в том, что ответственность за синхронизацию этого 
содержимого с содержимым холста лежит на разработчике, а ленивые или перегру- 
женные работой разработчики, скорее всего, передадут эту ответственность дальше, 
если ее реализация окажется сколь-нибудь сложной задачей. В другом подходе пред- 
лагается расширить возможность карт ссылок (существующей возможности НТМЕ, ко- 
торая разделяет изображение на несколько областей, активизируемых щелчком мы- 
ши), чтобы использовать их в качестве слоя поверх холста. Так как карта ссылок, по 
сути, является группой ссылок, она могла бы содержать важную информацию для счи- 
тывания вспомогательными программами и донесения ее к пользователю. 


Но в настоящее время нет смысла уделять большое внимание любой из этих идей, 
т. к. они обе все еще обсуждаются. Тем временем имеет смысл использовать холст 
для разных графических целей, таких как аркадные игры (большинство из них практи- 
чески нельзя сделать доступными) и визуализации данных (при условии наличия этих 
данных в текстовом формате в другом месте страницы). Но холст нельзя назвать 
удачным выбором для универсального элемента дизайна страницы. Поэтому, если вы 
планируете использовать его для создания вычурного заголовка или меню для своего 
веб-сайта, лучше пока повременить с этим. 


ГЛАВА 7 


Продвинутые методы работы 
с холстом 


Холст предоставляет огромный диапазон разнообразных возможностей. В преды- 
дущей главе мы научились рисовать штриховые рисунки, и даже создали прилич- 
ную программу для рисования, применив всего лишь несколько десятков строк 
кода Јауа$Ѕсгірі. Но это далеко не все возможности холста. С его помощью можно 
не только показывать динамические изображения и создавать программы рисова- 
ния, но и проигрывать анимации, обрабатывать изображения С ТОЧНОСТЬЮ ДО ПИК- 
села, а также играть в интерактивные игры. В этой главе мы заложим фундамен- 
тальную базу для реализации всех этих задач. 


Мы начнем с рассмотрения методов контекста, позволяющих рисовать разные типы 
содержимого на холсте, включая изображения и текст. Далее мы научимся укра- 
шать наши рисунки тенями, узорными и радиальными заливками. Наконец, мы ов- 
ладеем практическими методами для придания холсту интерактивности и проигры- 
вания анимаций. Сможем мы создать все эти приложения, используя лишь обыч- 
ный Јауа$сгірі-код и неудержимые амбиции. 


ПРИМЕЧАНИЕ 


Сначала в этой главе мы будем работать с небольшими фрагментами кода для рисо- 
вания. Этот код можно вставлять в свои страницы, но при этом нужно добавить эле- 
мент <сапуаз> и создать контекст рисования, как описано в разд. "Базовые возможно- 
сти холста" главы 6. А затем мы возьмемся за более амбициозные проекты. Хотя мы 
сможем увидеть большинство (если не весь) кода для рисования на холсте, исполь- 
зуемого в этих примерах, мы не сможем рассмотреть все подробности всех страниц. 
Для этого, и чтобы попробовать уже готовые примеры, посетите сайт книги по адресу 
ВЕр:/Лммим/.ргозеесй.сопт/И 5). 


Что еще можно рисовать на холсте? 


На холсте можно в совершенстве нарисовать любую желаемую графику, от набора 
линий или простых геометрических фигур до портрета со всеми мельчайшими под- 
робностями. Но с повышением уровня сложности графики повышается уровень 
сложности кода. В высшей степени маловероятно, что можно было бы написать 
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самостоятельно весь код, требуемый для создания высококачественного изобра- 
жения. 


К счастью, у разработчиков есть другие варианты, кроме как писать весь код само- 
стоятельно. Возможности контекста рисования не ограничиваются рисованием 
простых прямых и кривых ЛИНИЙ, также существуют методы для вставки готовых 
изображений, текста, узоров и даже рамок для показа видео. В следующих разделах 
мы узнаем, как использовать эти методы, чтобы обогатить содержимое нашего 
холста. 


Вставка в холст изображений 


Вам, наверное, приходилось видеть веб-страницы со спутниковыми картами того 
или иного региона планеты. Эти карты создаются из снимков отдельных участков 
поверхности земли, которые эти страницы загружают со спутника и объединяют 
в одно изображение. Это пример того, как можно взять несколько изображений 
и объединить их в одно требуемым образом. 


Холст поддерживает работу с обычными изображениями посредством метода кон- 
текста рисования агамїІтаде (). Чтобы вставить изображение в холст, методу 
агамІтаде () В параметрах передается объект изображения и координаты холста, по 
которым это изображение следует вставить: 


сопіехі .АгамТтаае (іта, 10, 10); 


Но чтобы передать объект изображения, его сначала нужно получить. В НТМЕ5 
есть три разных способа получения объекта изображения. Первый подход — соз- 
дать его самостоятельно попиксельно с помощью метода сгеакетпадерака (). Но 
этот подход очень трудоемкий и медленный. (Манипуляция пикселами рассматри- 
вается в разд. "Проверка на столкновение с использованием цвета пикселов" далее 
в этой главе.) 


Второй подход — использовать уже имеющийся в разметке элемент <1та>. Напри- 
мер, если у нас есть следующая разметка: 


<1м9 19="аггом Іеї" згс="аггои 1еЁ®.рпа"> 


изображение можно вставить в холст с помощью этого кода: 


хаг ітд = досотепіё .аекЕ1етерЕВуТа ("агхом 1еЁ®"); 
сопіехі .АгамТтаае (іта, 10, 10); 


Наконец, можно создать объект изображения и загрузить изображение из отдельно- 
го файла. Недостаток этого подхода состоит в том, что изображение нельзя исполь- 
зовать с методом агамТтаде () до тех пор, пока оно полностью не загрузится. Во из- 
бежание проблем нужно подождать, пока не выполнится событие изображения 
опІоаа, прежде чем пытаться выполнять какие-либо операции с ним. 


Чтобы разобраться в этом процессе, рассмотрим пример. Допустим, нам нужно 
отобразить на холсте изображение тахе.рпо. Теоретически, это можно сделать 
такой последовательностью операций: 
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// Создаем объект изображения. 

уаг 1иа = пем Іпаде (); 

// Загружаем файл изображения. 

1и9.згс = "тахе.рпа"; 

// Прорисовываем изображение. (Этот шаг может не выполниться, 
// т. к. изображение, может быть, еще не загрузилось.) 


сопіехі .дгамІпаде (1та, 0, 0); 


Здесь проблема состоит в том, что установка атрибута ѕгс начинает загрузку изо- 
бражения, но код продолжает исполняться дальше, не ожидая завершения загрузки. 
Правильно будет использовать следующий код: 


// Создаем объект изображения. 


уаг 1иа = пем Ітаде (); 


// Привязываем функцию к событию оп1оаа 
// Это указывает браузеру, что делать, когда изображение загружено. 
ітс.оп1оаа = Ёопсёіоп() { 

сопіехі .агамІтпаде (1та, 0, 0); 


}; 


// Загружаем файл изображения. 


1и9.згс = "тахе.рпа"; 


Этот подход может показаться нелогичным, т. к. порядок указания операций в коде 
не совпадает с порядком их исполнения. В данном примере вызов метода 
сопіехі .ЯгамТтаае() происходит в последнюю очередь, вскоре после установки 
свойства 1та.зхс. 


Изображения имеют широкий диапазон применений. Их можно использовать, что- 
бы приукрасить штриховые рисунки или как альтернативу рисованию изображений 
самому. Изображения можно использовать для разных объектов и персонажей, 
разместив их соответствующим образом на холсте. Изображения можно также 
применять для заполнения линий, чтобы придать им текстурированный вид. Мы 
рассмотрим несколько практических примеров использования рисунков далее 
в этой главе. 


АВАРИЙНАЯ СИТУАЦИЯ 
Все мои рисунки искажены! 
Если обнаружится, что ваше изображение по непонятной причине растянуто, сжато 


или искажено каким-либо другим образом, наиболее вероятной причиной этому будет 
установка размера холста посредством правила таблицы стилей. 


Правильно устанавливать размер холста надо через указание его высоты и ширины 
в атрибутах Һеідћһё И міаёћһ элемента <сапуаѕ> в разметке страницы. Может пока- 
заться, что эти значения не обязательно задавать в разметке, используя такую форму 
тега: 


<сапуаз></сапуаз> 
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а установить их в правиле таблицы стилей следующим образом: 
сапуаз { 

Һеідһћі: 300рх; 

міаєһ: 500рх; 
} 


Но этот подход не будет работать. Проблема состоит в том, что свойства ћһеісће и 
міаєћ С$$ отличаются от одноименных свойств элемента <сапуаѕ>. Если не указать 
размеры холста в разметке, будет установлен размер холста по умолчанию — 
300х150 пикселов. Потом таблица стилей будет растягивать или сжимать холст, чтобы 
подогнать его к указанным в ней размерам, изменяя соответствующим образом раз- 
меры всего содержимого холста. В результате размещенные на холсте изображения 
будут искажены, что, несомненно, не сделает их привлекательными. 


Во избежание этой проблемы всегда нужно указывать размер холста в разметке по- 
средством атрибутов ћеісћ+ и міа+ћ элемента <сапуаз>. А если нужно изменить раз- 
мер холста на основе каких-либо других критериев, значения этих атрибутов изменя- 
ются в разметке с помощью Уауа$спрЕ. 


Обрезка, разрезка 
и изменение размеров изображения 


Функция агамІтаде () принимает несколько необязательных параметров, которые 
позволяют манипулировать изображением на холсте. Например, размер изображе- 
ния можно изменить, указав параметры іа и везовЕ следующим образом: 


сопіехі .адгамІпаде (іта, 10, 10, 30, 30); 


В данном случае метод размещает изображение в рамке размером 30х30 пикселов, 
левый верхний угол которой находится в точке холста с координатами (10, 10). Ес- 
ли первоначальный размер изображения был 60х60 пикселов, то эта операция 
уменьшает его размеры наполовину в обоих направлениях, в результате чего общий 
размер конечного изображения будет лишь в четверть размера исходного. 


Если нужно вставить в холст только часть изображения, методу агамГласе () необ- 
ходимо передать четыре параметра в начале списка параметра. Эти параметры оп- 
ределяют позицию и размер части изображения, которую нужно вырезать: 


сопбехі .дӢгамІтаде (ітд, ѕоџгсе х, ѕоџгсе у, зоџгсе міабћ, зопксе һеідћё, 
х, у, міаі, һеідһіё); 


Последние четыре параметра в этом коде те же, что и в предыдущем примере — 
они определяют позицию и размер изображения на холсте. 


Допустим, что мы хотим вставить в холст только верхнюю половину изображения 
с исходным размером 200х200 пикселов. Для этого с левого верхнего угла изобра- 
жения (точка (0,0)) отрезаем часть изображения шириной в 200 и высотой 
в 100 пикселов, которую потом вставляем в холст в начальной точке с координата- 
ми (75, 25). Все это делается в одной строчке кода: 


сопіехі .АгамТтаае (іта, 0, 0, 200, 100, 75, 25, 200, 100); 
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Рис. 7.1. Слева: исходное изображение. 
Справа: обрезанная верхняя часть изображения, вставленная в холст 


Исходное изображение и результаты вставки в холст его части показаны на 
рис. 7.1. 


Возможностей метода ахамТнаае() недостаточно, если вставляемое в холст изобра- 
жение нужно повернуть или скосить на определенный угол. Но эти и другие мани- 
пуляции с изображением на холсте можно выполнить с помощью трансформаций, 
как рассматривается в разд. "Трансформации" главы 6. 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Видеокадр на холсте 


В первом параметре метода агамТтасде () указывается изображение, которое нужно 
вставить в холст. Как мы только что увидели, таким изображением может быть соз- 
данный объект изображения или элемент <іто>, расположенный где-то в другом мес- 
те разметки. 

Но это не все, что можно вставить в холст посредством этого метода. Вместо изобра- 
жения можно указать элемент <сапуаз> (но не тот, на котором выполняется настоя- 
щее рисование). Таким же образом можно вставить и элемент <уіаео>, в котором 
воспроизводится видео: 


уаг уіаео = аосиопепі .деёЕ1етепЕВу1а ("у1аеоР1ауег") ; 


сопіехі .адгамІпаде (уідео, 0, 0, уідео.с1іепійіаёћ, уідео.сІіепініаіёћ) ; 


При исполнении этого кода выполняется захват одного кадра видео, воспроизводимо- 
го в момент выполнения кода, который потом вставляется в холст. 


Эта возможность открывает дверь для создания некоторых интересных эффектов. 
Например, с помощью таймера можно последовательно выполнять захват кадров 
воспроизводимого видео и вставлять их в холст. Если делать это достаточно быстро, 
то вставляемая в холст последовательность кадров будет создавать эффект проиг- 
рывающегося видео. 


Но чтобы это не был просто другой видеопроигрыватель, захваченные кадры можно 
модифицировать перед тем, как вставлять их в холст. Например, вставляемый кадр 
можно увеличить или уменьшить или наложить какой-либо эффект в стиле Рһоѓоѕћор, 
модифицировав его на уровне пикселов. Один из примеров такой манипуляции см. по 
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адресу ПИр:/Инт!5аосог.сот/\мАео-сапуа$-тадюс. В нем показано, как сделать 
цветное видео черно-белым, преобразуя каждый цветной пиксел захваченного кадра в 
оттенок серого. 


Вставка в холст текста 


Другим типом изображения, который нам вряд ли бы хотелось составлять из от- 
дельных прямых и кривых, является текст. К счастью, разработчики НТМІ5 поза- 
ботились об этом для нас и предоставляют два метода контекста рисования для ра- 
боты с текстом. 


Но прежде чем вставлять в холст какой-либо текст, нужно указать шрифт для него, 
установив значение свойства контекста Еоп+. Это значение указывается посредст- 
вом строки с таким же синтаксисом, как и для универсального свойства Еопе С$5. 
Как минимум, нужно указать размер шрифта в пикселах и его название. Например, 
как в следующей строке кода: 


сопіехі.Ғопі = "20рх Агіа1"; 
В случае неуверенности в поддержке определенного шрифта браузерами, можно 
указать список шрифтов: 


сопіехі.Ғопі = "20рх Уегаапа, запз-зет1 ЕЁ"; 


Также можно установить жирный шрифт или курсив, указав соответствующие па- 
раметры в начале строки: 


сопіехі.Ғопі = "ро1а 20рх Агіа1"; 


Самое главное, благодаря С553 можно использовать вычурные встроенные шриф- 
ты. Для этого нужно лишь сначала зарегистрировать название шрифта в таблице 
стилей (см. разд. "Типография для Интернета" главы 8). 


После установки шрифта текст в холст вводится с помощью метода ғі11техі (). На- 
пример, следующий код вводит в холст строку текста, левый верхний угол которо- 
го находится в точке (10, 10): 


сопіехі.іехіВаѕе1іпе = "бор"; 
сопіехі.Ғі115іу1Іе = "Ю1аск"; 
сопіехі. Е111Техё ("Т'ш ѕіџск іп а сапуаѕ. бомеопе Іеё ме оџё!", 10, 10); 


Текст можно вставлять в любое место на холсте, но только по одной строке за раз. 
Чтобы вставить несколько строк, нужно делать соответствующее число вызовов 
метода +Е111Техе (). 


СОВЕТ 


Чтобы разделить абзац текста на несколько строчек, можно создать свой алгоритм 
переноса строк. Идея заключается в следующем: предложение разбивается на сло- 
ва, и с помощью метода меазигеТех® () определяется количество слов, которые по- 
мещаются в каждую строку. Это кропотливая работа, но на сайте ҺМір://іпуик.сот/ 
бестћіа можно найти хорошую отправную точку для ее выполнения. 


Вместо метода ғі11Техі () можно использовать другой метод для ввода текста — 
зігокеТех+ (). Этот метод вводит очертания букв текста; цвет и толщина очертания 
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определяются значениями свойств контекста зегокебіёу1е И 1іпеніаёћ. Далее пока- 
зан пример использования этого метода: 

сопіехі.Ғопі = "ро1а 40рх Уегаапа, запз-зех1 Е"; 

сопіехі.1іпейіаёһ = "1"; 

сопбехе.зЕгокебеу1е = "геа"; 

сопіехі . зігокеТехі ("Т'м ап ООТЬТМЕ", 20, 50); 


Как уже отмечалось, метод ѕігокетТехі () вводит только очертания букв. Если тре- 
буется создать текст одного цвета, а его обводку —— другого, можно использовать 
сначала метод ғ#і11Техі (), а после него метод зігокетех+ (). На рис. 7.2 показан 
пример результатов выполнения обоих методов (по отдельности). 


Оу те | {= 
є С О йеу//С:/НТМІ5/Сһарїег%2006/Техіһїіті ү зб 


"т ѕ{искК іп а сапуа$. Зотеопе Іеї те оиї! 


Л” ат ОШТАЛМЕ = 


Рис. 7.2. Текст, созданный методом #Ғі11Техї () (верхняя строчка) 
и методом ѕігокеТех+ () (нижняя строчка) 


СОВЕТ 


Операция вывода текста на холст выполняется намного медленнее, чем рисование 
линий и даже изображений. Скорость не имеет важности при создании статического 
изображения (например, диаграммы), но может быть фактором при создании интерак- 
тивного приложения или анимации. Оптимизировать ввод текста можно, сначала со- 
хранив требуемый текст в файле изображения, а потом отображая его на холсте по- 
средством метода агамТмаче (). 


Тени и вычурные заливки 


До сих пор для рисования и заливки изображений на холсте мы использовали 
сплошные цвета. И хотя в этом определенно нет ничего предосудительного, арти- 
стические натуры будут рады узнать, что возможности холста не ограничиваются 
только сплошными цветами. Одним из примеров такого оформления будет воз- 
можность любого изображения на холсте отбрасывать артистически оформленную 
тень. Другим примером будет заполнение фигуры узором повторяющихся изобра- 
жений. Но почти наверняка самой изысканной возможностью рисования являются 
градиенты, посредством которых можно смешивать два или несколько цветов, соз- 
давая калейдоскопические узоры. 
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В последующих разделах мы научимся использовать эти возможности, просто 
устанавливая разные свойства контекста рисования холста. 


Создание теней 


Одной из полезных возможностей холста является добавление теней позади любого 
нарисованного изображения. На рис. 7.3 показано несколько примеров разных ти- 
пов теней. 


{пе | Е 
| О задом | + 


Є 19 |0) яе///СУНТМЕ/Свариег О7/бвадоми. нет! а || Е: 


Тһіѕ 1$ а ѕиБіе, $1ідһу о!а-ғаѕһіопеа зПадо\м. 


Тһіѕ 15 а діѕќапё ѕһадом... 


Рис. 7.3. Тени можно применять с одинаковым успехом с фигурами, изображениями и текстом. 
Одной из интересных особенностей является взаимодействие теней с изображениями с прозрачным 
фоном, такими как звезда на этом рисунке. Как можно видеть, в данном случае тень следует очертаниям 
звезды, а не квадрату, определяющему все изображение. (На момент написания данной книги 
эту возможность поддерживали только Іпќегпеї Ехріогег и Еігеѓох.) Тени также хорошо сочетаются 
с текстом, позволяя создавать разнообразные эффекты, управляемые установкой 
соответствующих параметров 


По сути, тень — это размытая версия исходного изображения — линии, фигуры, 
изображения или текста. Внешний вид тени управляется установкой свойств кон- 
текста рисования (табл. 7.1). 


Таблица 7.1. Свойства для управления внешним видом теней 


Свойство Описание 


ѕһадӢомСо1ог Устанавливает цвет тени. Можно установить черную или цветную тень, 
но обычно лучше всего делать ее полусерой. Другой хороший подход — 


использовать полупрозрачные тени (см. разд. "Прозрачность" главы 6), 
чтобы можно было видеть содержимое под ними. Отключить тени можно, 
присвоив атрибуту альфа свойства эрааомСо1ог нулевое значение 
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Таблица 7.1 (окончание) 


Свойство Описание 


зрааомВТах Устанавливает степень расплывчатости теней. Нулевое значение этого 
свойства определяет четкую, резкую тень, выглядящую как силуэт ис- 
ходного изображения. А значение 20 дает тень в виде размытой дымки, 
и можно установить еще высшее значение. Большинство людей считает, 
что лучше всего выглядит слегка размытая тень (значение звадомВ1 ак 
около 3) 


зһааомОЁ зех Определяют положение тени относительно содержимого, которому она 
и ѕзһааомо#ЁѕеіҮ принадлежит. Например, если присвоить каждому свойству значение 5, 
тень будет расположена на 5 пикселов вправо и 5 пикселов вниз от ис- 
ходного содержимого. Отрицательные значения сдвигают тень в проти- 
воположном направлении — влево и вверх 


Разнообразные тени на рис. 7.3 были созданы следующим кодом: 


// Рисуем прямоугольник с тенью. 
сопіехі.гесі (20, 20, 200, 100); 
сопбехі.Ғі115ёуІе = "#8ЕОбЕЕ"; 
сопіехі . зһааомСо1ог = "+ЬБЬЬЬЬ"; 
сопіехі . зһааомВіцг = 20; 
сопіехі . радомОЕЕзееХ = 15; 
сопіехі . зһааомО#ҒЁѕеёҮ = 15; 
сопіехі. Е111(); 


// Рисуем звезду с тенью. 
сопіехі .зра@омОЕЕзееХ = 10; 
сопіехі . зпа@омОЕЕзееуУ = 10; 
сопіехі . ѕһааомВіцг = 4; 


ітс = аосотепі .деёЕ1епепіВута ("зба"); 
сопіехі .аӢгамІпаде (іта, 250, 30); 


сопіехі.іехіВаѕе1іпе = "бор"; 
сопіехі.Ғопі = "ро1а 20рх Агіа1"; 


// Рисуем три строчки текста с тенью. 
сопбехі .зрааомВТахк = 3; 

сопіехі . зһааомОғҒ зех 2$ 

сопіехі . зрадомОЕЕзееуУ 25 
сопіехі.Ғі115іу1Іе = "зіее1р1пе"; 


// Едва различимая, слегка старомодная тень. 


сопіехі.#і11Техі ("Тһіѕ іѕ а забЕ1е, ѕІідһё1у о1а-Ғаѕһіопеа зВааом.", 
1007175): 


сопіехі . зһааоиВ1іог = 5; 

сопбехі .зрадомОЕЕзееХ = 20; 
сопбехі . зћадӢомОЁЁѕеёҮ = 20; 
сопбехі.Ёі115іуІе = "дгееп"; 
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// Далекая тень. 
сопіехі.Ғі11Техі ("Тһіѕ 1$ а аӢізёапё зрадом...", 10, 225); 


сопіехіё .зћһааомВіцг = 15; 


сопіехі . зһааомОЁ# Ё ѕеёХ = 0; 
сопіехі . зһааомОЁ Ё ѕеёҮ = 0; 
сопіехі . зћһааомСо1ог = "р1аск"; 


сопіехі.Ғі115іу1Іе = "мһібе"; 
// Эта тень не смещена от исходного изображения и создает эффект ореола. 


сопёбехі.Ғ111ТехіЕ ("ТһҺіѕ ѕһадои іѕп' оЁЁзѕеё. ТЕ сгеаёеѕ а Ба1о еЁғесі.", 
10, 300); 


Заполнение фигур изображениями 


Нарисованные на холсте фигуры можно заполнять не только сплошными или полу- 
прозрачными цветами, но также градиентными цветами или вымащивать изобра- 
жениями. Такие вычурные стили, несомненно, сделают простые фигуры более при- 
влекательными. Такого рода оформление выполняется в два этапа: сначала создает- 
ся заполнение, которое потом связывается со свойством ғі115+у1е (или иногда со 
СВОЙСТВОМ зігокеЅіу1е). 


Заполнение вымащиванием осуществляется путем множественной вставки копий 
одного исходного изображения вплотную друг к другу (рис. 7.4). 


ЕЕ Е ЕЕ г 
= 0 


Рис. 7.4. Слева: исходное изображение-плитка. 
Справа: область холста, заполненная плитками исходного изображения 


Изображение, используемое в качестве исходной плитки, нужно загрузить в объект 
изображения посредством одного из методов, рассмотренных в разд. "Вставка 
в холст изображений" ранее в этой главе. В данном примере используется первый 
подход: 


уаг Шиа = аосотепё .дебЕ1етепіВуІа ("югіскТі1е"); 


Имея объект изображения, можно создать объект шаблона, используя метод кон- 
текста сгеаёерРаїёегп (). На этом этапе указывается направление вымащивания — 


Глава 7. Продвинутые методы работы с холстом 245 


горизонтально (хереа+-х), вертикально (гереак-у) или в обоих направлениях 
(гереа®). 


уаг раїёегп = сопіехі.сгеаіеРаёіегп (іта, "гереаё"); 


Последний шаг — присвоить созданный объект шаблона свойству контекста 
#11155 у1е ИЛИ зігокеЅіу1е: 
сопбехі.#1115іу1Іе = раіёегп; 


сопіехі.гесі (0, 0, сапуаѕ.міаёһ, сапуаѕ.һеідћі) ; 
сопіехі.Ғ1і11(); 


Этот код создает прямоугольник, который заполняет холст исходным изображени- 
ем (см. рис. 7.4). 


Градиентная заливка фигур 


Другим типом заполнения является градиентное, в котором смешиваются два или 
несколько цветов. Холст поддерживает линейные и радиальные градиенты, сравни- 
тельные примеры которых показаны на рис. 7.2: 


сә 


[2] бгааіепёѕ 9 


є С © Сгааіепіѕ.ћіті аа 


Рис. 7.5. Линейный градиент (верхний слева) переходит из одного цвета в другой по прямой линии. 
Радиальный градиент (верхний справа) переходит из одного цвета в другой по радиусу. Оба типа 
градиентов поддерживают больше, чем два цвета, позволяя создавать эффект полос или 
концентрических кругов, плавно переходящих из одного цвета в другой 
(внизу слева и справа соответственно) 


СовеТ 


Черно-белые изображения градиентов в книге вряд ли позволяют получить должное 
представление об этих эффектах, поэтому рекомендуется оценить их на сайте этой 
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книги по адресу ИЧр:/ЛМмим\м.ргозаесй.сот/Ит15/. Там же можно ознакомиться и с ко- 
дом для создания этих эффектов, включая логику для рисования кривых Безье, из ко- 
торых созданы сердцевидные фигуры. 


Первым шагом в создании градиентной заливки будет создание правильного типа 
объекта градиента. Для решения этой задачи контекст рисования предоставляет два 
метода: сгеабеііпеагбгайіепі () И сгеаеКадіа1бгайіепі (). Оба метода работают бо- 
лее-менее похоже: они содержат список цветов, которые задействуются в разных 
точках. 


Самый легкий способ разобраться с градиентами — это изучить простой пример. 
В качестве такого примера рассмотрим код для создания градиента в левой верхней 
сердцеобразной фигуре на рис. 7.5: 


// Создаем градиент от точки (10, 0) до точки (100, 0). 


уаг дгайіепі = сопіехі.сгеаіе1іпеагбгааіепі (10, 0, 100, 0); 


// Добавляем два цвета. 
агадіепі .ааасо1огЅіор (0, "мадепфа"); 
агадіепі .ааасо1огЅіор (1, "уе11ом"); 


// Вызываем функцию для рисования фигуры. 
агамНеагі (60, 50); 


// Рисуем фигуру. 
сопіехі.Ғі11ѕіу1Іе = агад1епе; 
сопіехі.Ғ111(); 
сопіехі.зЕгоке (); 


При создании линейного градиента указываются две точки, представляющие нача- 
ло и конец пути, вдоль которого происходит изменение цвета. 


Важность линии градиента состоит в том, что она определяет внешний вид гра- 
диента (рис. 7.6). 


Рассмотрим, например, линейный градиент, переходящий из светло-розового цвета 
в желтый. Этот переход можно выполнить в полосе шириной в несколько пикселов 
или же по всей ширине холста. Кроме этого, направление перехода может быть 
слева направо, сверху вниз или же с любым наклоном между этими двумя направ- 
лениями. Все эти аспекты определяются линией градиента. 


СОВЕТ 


Градиент можно рассматривать как цветовой дизайн, расположенный под холстом. 
Эта цветовая поверхность формируется при создании градиента. При заполнении 
градиентом фигуры мы вырезаем отверстие по контуру этой фигуры, которое позво- 
ляет градиенту просматриваться. Конечный результат — то, что отображается на хол- 
сте — зависит как от параметров градиента, так и от размера и позиции фигуры. 


В данном примере линия градиента берет начало в точке (10, 0) и оканчивается 
в точке (100, 0). Эти точки предоставляют нам следующую важную информацию 
о данном градиенте. 
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О Градиент горизонтальный. Это означает, что переход цветов происходит слева 
направо. Мы извлекаем эту информацию из того факта, что обе точки имеют 
одинаковую ординату. Если бы мы хотели выполнить переход сверху вниз, то 
можно было использовать, например, точки (0, 10) и (0, 100). А для перехода по 
диагонали сверху вниз слева направо можно было бы использовать, например, 
точки (10, 10) и (100, 100). 


П Собственно переход охватывает всего лишь 90 пикселов (начиная со значе- 
ния абсциссы, равного 10, и заканчивая, когда это значение равно 100). В дан- 
ном примере горизонтальный размер сердцевидной фигуры слегка меньше, чем 
размеры градиента, вследствие чего в фигуре видно большую часть градиента. 


О Цвета за пределами этого градиента становятся сплошными. Поэтому, если 
сделать фигуру шире, ее левый край будет окрашен чистым светло-розовым 
цветом, а правый —Щ чистым желтым. 


СОВЕТ 


Часто размер градиента будет лишь слегка больше заполняемой им фигуры, как в 
этом примере. Но возможны и другие варианты. Например, чтобы заполнить несколь- 
ко фигур разными частями градиента, можно создать градиент, покрывающий весь 
холст. 


Начало линии градиента (10, 0) 


Конец линии градиента (100, 0) 


Внешний круг 


Внутренний круг 


Рис. 7.6. Слева: градиент для нижней слева фигуры на рис. 7.5. Из градиента, используемого 
для заливки фигуры, отображается только часть его. Справа: то же справедливо и для радиального 
градиента, использующегося для заливки сердцевидной фигуры нижней справа фигуры на рис. 7.5 


Установка цветов градиента осуществляется вызовами метода градиента 
ааасо1огЅіор (). При каждом вызове метода ему передается значение смещения от 0 
до 1, которое определяет местонахождение цвета в переходе. Значение 0 означает, 
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что цвет находится в самом начале градиента, а значение 1 размещает цвет в самом 
конце. Изменив эти числа (например, на 0,2 ио, 8), мы можем сжать градиент, по- 
казывая большую область сплошного цвета на каждом конце. 


Для двухцветного градиента наиболее логичными значениями смещения будут 0 
и 1. Но для градиентов с большим количеством цветов можно устанавливать раз- 
ные смещения, чтобы сжать одни цветовые полосы и растянуть другие. В левой 
нижней фигуре на рис. 7.5 смещения распределены равномерно, вследствие чего 
все цветовые полосы имеют одинаковую ширину. 


уаг ага еп = сопіехі.сгеаіеіпеагбгааіепі (10, 0, 100, 0); 


агаадіепі .ааасо1огЅіор ("0", "масепба"); 
адгадіепі .ааасо1огЅёор (".25", "Ю1пе"); 
агаадіепі .ааасо1огЅіор (".50", "дгееп"); 
агадіепі .ааасо1огѕёор (".75", "уе11ом"); 
агаадіепі .ааасо1огЅіёор ("1.0", "хеа"); 
акамНеаг+ (60, 200); 
сопіехі.Ғі115іу1Іе = агад1епе; 
сопіехі.Ғі11(); 
сопіехі.зігоке (); 


ПРИМЕЧАНИЕ 


Если на данный момент вам не все понятно с градиентами, не паникуйте. В конце кон- 
цов, вам не обязательно понимать все малейшие подробности процесса создания 
градиента, чтобы его использовать. Кроме того, вы можете поэкспериментировать со 
смещениями, пока не получите привлекательный переход цветов. 


Процесс создания радиального градиента такой же, каки линейного, только вместо 
определения двух точек нужно определить два круга. Это потому, что переход цве- 
тов в радиальном градиенте распространяется с меньшего круга к большему. Эти 
круги определяются указанием их центра и радиуса. 


В правой верхней фигуре примера радиального градиента на рис. 7.5 цветовой пе- 
реход распространяется от центральной точки фигуры с координатами (180, 100). 
Внутренний цвет ограничен кругом радиусом 10 пикселов, а внешний — кругом 
радиусом 50 пикселов. Опять же, если выйти за эти пределы, мы получим сплош- 
ные цвета — светло-розовый в центре и желтый по внешней окружности. 


Код для создания двухцветного радиального градиента выглядит так: 


уаг дгадаіепі=сопіехі .сгеаёеВКааіа1бгааіепі (180, 100, 10, 180, 100, 50); 
агадіепі .ааасо1огбіёор (0, "мадепфа"); 
агадіепі .ааасо1огЅіор (1, "уе11ом"); 


агамНеаг+ (180, 80); 
сопіехі.Ғі115іу1Іе = адгадіепі; 
сопіехі.Ғ111(); 
сопіехі.зЕгоке (); 
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ПРИМЕЧАНИЕ 


Чаще всего для внутреннего и внешнего кругов указываются одинаковые центры. Но 
это не обязательно, и их можно сместить относительно друг друга, что может растя- 
нуть, сжать и по-иному исказить переход, придавая ему интересный эффект. 


На основе этого примера можно создать многоцветный радиальный градиент, при- 
мер которого показан справа внизу на рис. 7.5. Для этого нужно просто перемес- 
тить центр кругов внутрь сердцеобразной фигуры и добавить другие цвета, те же, 
что и для многоцветного линейного градиента: 


уаг дгадіепі = сопіехі.сгеаёеКааіа1бгааіепі (180, 250, 10, 180, 250, 50); 
адгадіепі .ааасо1огѕЅіор ("0", "тадепёа") ; 

агадіепі .ааасо1огЅіор (".25","Р1ае"); 

адгаадіепі .ааасо1огѕіЕор (". 50", "дгееп"); 
".75", "уе11ом") ; 
агаадіепі .ааасо1огЅіор ("1.0", "геа"); 
акамНеаг+і (180, 230); 

сопіехі.Ғі115іу1Іе = адгадіепі; 
сопіехі.Ғ111(); 

сопіехі.зігоке (); 


( 
( 
дгадіепі .адасо1огзіор ( 
( 


Теперь у вас должно быть достаточно знаний, чтобы самостоятельно создавать ка- 
лейдоскопические градиенты. 


Обобщая сказанное: рисуем график 


На данном этапе мы разобрались с большей частью предоставляемых холстом воз- 
можностей рисования и можем, наконец, извлечь из наших знаний практическую 
пользу. В следующем примере мы возьмем скучный текст и цифры и представим 
их на холсте в виде простого, но интересного графика. 


Отправная точка для этого примера показана на рис. 7.7 — личностный тест на 
двух страницах с минимальной графикой. Пользователь отвечает на вопросы на 
первой странице, а потом нажимает кнопку Сей Ѕсоге, чтобы вывести на второй 
странице результаты теста, полученные посредством обработки данных с первой 
страницы в соответствии с пресловутой пятифакторной моделью личности 
(см. врезку "На профессиональном уровне. Как охарактеризовать личность по пя- 
ти числам" далее в этой главе). 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Как охарактеризовать личность по пяти числам 


В пятифакторном личностном тесте определяется тип личности на основе пяти лично- 
стных качеств: откровенность (ореппеѕѕ), сознательность (сопѕсіепііоиѕпеѕѕ), экс- 
траверсия (ехігауегѕіоп), податливость (адгееабіепеѕѕ) и невротицизм (пеиго#с!$т). 
Эти факторы были выведены на основе анализа психологами тысяч прилагательных, 
описывающих личность, который был выполнен посредством статистической обработ- 
ки на компьютере опросов по установлению личностных качеств. Были установлены 
прилагательные, которые люди обычно используют совместно в ответах на вопросы, 
на основе чего был определен наименьший набор основных личностных качеств. На- 
пример, люди, считающие себя дружелюбными, также описывают себя общительны- 
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ми и компанейскими, поэтому можно объединить все эти качества в один личностный 
фактор, который психологи называют экстраверсией. В результате такого анализа 
исследователи свели почти 20 тысяч прилагательных к пяти тесно взаимосвязанным 


факторам. 
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Рис. 7.7. Выберите ответы на вопросы на первой странице (вверху), а потом узнайте свои результаты 
на второй странице (внизу). К сожалению, без какого-либо визуального ориентира пользователям 


трудно разобраться, что эти цифры означают 
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Код ЈауаЅстірі этого примера линейный. Когда пользователь нажимает кнопку 
с номером ответа, ее цвет меняется, чтобы показать сделанный выбор. Когда ПОЛЬ- 
зователь завершает опрос, его ответы обрабатываются простым алгоритмом по не- 
скольким оценочным формулам, чтобы вычислить числовые значения пяти лично- 
стных факторов. Исследовать весь код или выполнить тест можно на сайте книги 
по адресу ћќёёр://ЉҺєр://уууу.ргоѕеќесһ.сот/Љті15/. 


Пока что здесь нет никакого волшебства НТМГ5. Но представьте себе, как можно 
было бы улучшить страницу вывода результатов, если бы вместо представления 
в виде цифр их можно было отобразить в виде графика. На рис. 7.8 показан один из 
возможных вариантов такого графика. 
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Рис. 7.8. Эта страница создана с помощью нескольких разных способов рисования на холсте, 
включая рисование линий, изображений и ввода текста. Но самым интересным является метод 
динамического рисования этих простых графиков на основе предоставляемых пользователем ответов 
на странице вопросов 
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В нем для вывода категорий результатов теста используются пять элементов хол- 
ста, по одному для каждого личностного фактора. Код для создания этого графика 
таков: 


<Вагоир> 
<Һ1>Ғіуе Ғасіог Регзопа1іёу Тезі</һ1> 
<Һ2>Тһе Веѕи1ёѕ</һ2> 

</ћагоџр> 


<аіу с1азѕ="ѕсоге"> 

<Һ2 іа="ҺеадӢіпдЕ">Ехігауегѕіоп: </Һ2> 

<сапуаѕ іа="сапуаѕЕ" Һеісһі="75" міаёһ = "550"></сапуаѕ> 
</аіу> 


<аіу с1азѕ="ѕсоге"> 
<р2 іа="ҺеааіпдА"Ассотподаёіоп: </һ2> 
<сапуаз іа="сапуаѕА" һеідһё="75" міаёһ 
</аіу> 


"550"></сапуаѕ> 


<аіу с1азѕ="ѕсоге"> 

<һ2 1а="Һеааіпдс">Сопѕсіепііоџѕпеѕѕ: </2> 

<сапуаз 14="сапуазС" Һеісһі="75" міаёһ = "550"></сапуаѕ> 
</аіу> 


<аіу с1азз="зсоге"> 

<Һ2 1а="реаа1паМ">Меико&1с1 зщ: </һ2> 

<сапуаз 14="сапуазМ" Һеісһі="75" міаёһ="550"></сапуаѕ> 
</аіу> 


<аіу с1азѕ="ѕсоге"> 

<Һ2 іа="ҺеадӢіпдо">Ореппеѕѕ: </һ2> 

<сапуаз 14="сапуазР" Һеісһі="75" міаёһ="550"></сапуаѕ> 
</аіу> 


Все графики рисуются одной и той же специальной функцией ЈауаЅсгірі, называю- 
щейся ріо+ѕсоге (). Она вызывается пять раз, каждый раз с разными параметрами. 
Например, чтобы нарисовать график для фактора экстраверсии вверху страницы, 
код передает функции самый верхний элемент холста, оценку экстраверсии (как 
число от —20 до 20) и название фактора ("Ехігауегѕіоп"): 


міпаои.оп1оаа = Ёопсііоп () { 


// Получаем элемент <сапуаѕ> для оценки фактора экстраверсии. 


уаг сапуаѕЕ = доситепіё .деїЕ1ІепепЕВута ("сапуаѕЕ"); 
// Добавляем полученную оценку в соответствующее название фактора. 


// (Оценка хранится в переменной ехігауегѕіоп.) 


аосотепі . деЕЕ1етепЕВута ("ҺеааіпдЕ") .іппегнНтТмі += ехігауегѕіоп; 


Глава 7. Продвинутые методы работы с холстом 253 


// Прорисовываем оценку в соответствующем элементе холста. 


р1оЕ5соге (сапуаѕЕ, ехігауегзіоп, "Ехігауегѕіоп"); 


Функция р1Іоєѕсоге () содержит внушительный объем кода для рисования, который 
к этому времени должен быть вам знакомым. Она использует разные методы кон- 
текста рисования для отображения отдельных составляющих графика: 


Ғипсііоп р1оЕ5соге (сапуаѕ, зсоге, ііё1Іе) { 
уаг сопіехі = сапуаз.деїСопіехі ("24"); 


// Рисуем стрелки на концах линии графика. 


хаг ітд = досотепі .деёЕ1етепЕВута ("аггои 1еЁ®"); 
сопіехі .агамІтаде (іта, 12, 10); 


119 = аосотепё .деёЕ1епепіВута ("асгом гісћі"); 
сопіехі .агамІпаде (іта, 498, 10); 


// Рисуем линию между стрелками. 

сопіехі .шоуеТо (39, 25); 
сопіехі.1іпеТо (503, 25); 
сопіехё.1іпейіаёһ = 10; 
сопіехі.ѕігокеѕіу1е = "гдр (174, 215,244)"; 
сопіехі.зігоке () ; 


// Отображаем числа на шкале графика. 
сопіехі.#і115іуІе = сопіехі.зёгокеѕіу1е; 
сопіехі.Ғопі = "іба1іс ро1а 18рх Аг1а1"; 


сопіехі.їехіВаѕе1іпе = '$ор'; 

сопіехі.Ёі11Техі ("-20", 35, 50); 
сопіехё.Ёі11Техі ("0", 255, 50); 
сопіехі.Ёі11Техі ("20", 475, 50); 


// Отображаем звездочку, указывающую полученную оценку 
// на шкале графика. 


ітд = аосотепі .деёЕ1етепіВутІа ("зіаг"); 
сопіехі .агамІтаде (ітд, (ѕсоге+20) /40*440+35-17, 0); 
} 


Самой важной является последняя строка кода, которая вставляет звездочку в соот- 
ветствующем месте шкалы с помощью следующего, слегка неопрятного, урав- 
нения: 


сопбехі .ЯкамТтаде (1лта, (зсоге+20) /40*440+35-17, 0); 


Логика этого уравнения следующая. Первый шаг — это преобразование оценки 
в проценты от 0 до 100. Так как числовое значение оценки находится в диапазоне 
значений от —20 до 20, первой выполняемой кодом операцией будет изменение его 
на значение в диапазоне от 0 до 40: 


зсоге+20 


254 Часть 11. Создание современных веб-страниц 


А чтобы получить процентное выражение оценки, откорректированное число 
делится на 40: 


(ѕсоге+20) /40 
Полученные проценты нужно умножить на длину линии. Таким образом, 0% будет 


в самом левом конце шкалы, 100% — на противоположном, а все остальные ре- 
зультаты — где-то между этими двумя: 


зсоге+20) /40*440 
Этот код работал бы как следует, если бы концы линии шкалы находились в точках 
с абсциссами 0 и 400. Но в действительности шкала немного смещена от левого 


края окна, чтобы она не сливалась с ним. Поэтому звездочку необходимо сместить 
вправо на такое же расстояние: 


(ѕсоге+20) /40*440+35 
Но таким образом с правильной позицией на шкале совмещается левый край звез- 
дочки, в то время как мы хотим совмещать ее середину. Эта проблема решается 


путем вычитания из предыдущего результата приблизительно половины ширины 
звездочки: 


(5соге+20) /40*440+35-17 


Это, наконец, дает нам конечное значение абсциссы положения звездочки на шкале 
в соответствии с оценкой данного фактора. 


ПРИМЕЧАНИЕ 


Всего лишь небольшой шаг отделяет статические рисунки от динамической графики, 
изменяющейся в зависимости от предоставленных данных, наподобие той, которая 
была использована в этом примере. Но, сделав этот шаг, вы сможете применять свои 
знания и навыки для создания разнообразной управляемой данными графики, от тра- 
диционных секторных диаграмм до инфографики с использованием шкал и счетчиков. 
Если вы хотите облегчить себе эту задачу, стоит подумать о применении графической 
библиотеки, содержащей готовые процедуры Јаха$сгірі для рисования распростра- 
ненных типов графиков на основе предоставляемых данных. В качестве двух хороших 
примеров такой библиотеки можно назвать Когарй (ммм.гдғарһ.пеї) и 2іподСһагі 
(мимим/.2тоспан.сот). 


Как сделать фигуры интерактивными? 


Холст является незапоминаемой (поп-геѓаіпей) поверхностью рисования. Это озна- 
чает, что холст не отслеживает выполняемые на нем операции рисования, он фик- 
сирует лишь конечный результат этих операций — набор разноцветных пикселов, 
составляющих его содержимое. 


Например, если нарисовать красный квадрат в центре холста методом зекоке() или 
Е111(), как только завершится выполнение этого метода, квадрат станет ничем 
иным, как блоком красных пикселов. Он может казаться вам квадратом, но холст не 
обладает информацией об этом. 
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Такой подход позволяет сделать процесс рисования быстрым, но он также услож- 
няет задачу создания интерактивной графики. Допустим, что нам нужно разрабо- 
тать более интеллектуальную версию программы рисования, которую мы рассмот- 
рели в разд. "Создание простой программы рисования" главы 6. В частности, мы 
хотим, чтобы кроме линий в ней также можно было бы рисовать прямоугольники. 
(Но это еще легко!) Более того, мы хотим не только рисовать прямоугольники, но 
также и выбирать нарисованные прямоугольники, перетаскивать их на новое место, 
изменять их размеры, цвет и т. п. Но для того чтобы реализовать все эти возможно- 
сти, нам нужно решить несколько проблем. Прежде всего, как нам узнать, что 
пользователь щелкнул на прямоугольнике? Потом, как нам узнать все подробности 
о данном прямоугольнике — его координаты, размер, цвет контура и заполнения? 
Наконец, как нам выяснить подробности обо всех прочих фигурах на холсте? Что 
нам необходимо знать, если мы хотим изменить прямоугольник и обновить холст? 


Чтобы решить все эти проблемы и сделать холст интерактивным, нам нужно от- 
слеживать все рисуемые на нем объекты. Потом, когда пользователь щелкнет в ка- 
кой-либо точке холста, нужно определить, не попал ли он по одной из фигур. Этот 
процесс называется проверкой на столкновение (В {езНп). Если мы можем решить 
эти две задачи, решение остальных — модифицирование фигуры и обновление 
холста соответствующим образом — будет легким. 


Отслеживание нарисованного содержимого 


Для того чтобы изменять и обновлять содержимое холста, нам необходимо иметь 
всю информацию об этом содержимом. Возьмем, например, интерактивную про- 
грамму для рисования кругов, окно которой показано на рис. 7.9. 
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Рис. 7.9. Интерактивная программа, рисующая круги. Можно выбрать какой-либо круг, щелкнув по нему 
мышью (у выбранного круга появляется более толстый контур), и перетащить его на новое место 
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Для простоты, программа рисует только отдельные круги разного размера и цвета. 
Чтобы отслеживать отдельный круг, нам нужно знать его позицию на холсте (т. е. 
координаты центра), радиус и цвет заливки. Вместо того чтобы создавать несколь- 
ко десятков переменных для хранения всей этой информации, нужно хранить эти 
четыре типа данных в одном компактном пакете. Таким пакетом будет пользова- 
тельский объект (сизот оБ]есо. 


Рассмотрим создание пользовательского объекта на случай, если вам никогда 
раньше не приходилось выполнять эту стандартную процедуру. Сначала создается 
функция с названием, отображающим тип нашего объекта. Например, функцию для 
создания пользовательского объекта для рисования круга можно назвать сігсіе (): 


Ғопсёіоп Сігс1е() { 


} 


Мы хотим, чтобы наш объект мог хранить данные. Это делается посредством соз- 
дания свойств с помощью ключевого слова +515. Например, чтобы определить 
СВОЙСТВО гаадіоѕ объекта круга, присваивается значение выражению +һіѕ.гааіџѕ. 


Далее приводится пример кода функции для создания кругов, которая сохраняет 
три типа информации: абсциссу, ординату и радиус круга. 


Ғипсііоп Сігс1е() { 
һіѕ.х = 0; 
һіѕ.у = 0; 
һіѕ.гааіцѕ = 15; 


} 


Теперь С ПОМОЩЬЮ функции Сігс1е() можно создавать новые объекты круга. Но 
здесь есть еще одна особенность — мы не хотим вызывать для этого нашу функ- 
цию, а вместо этого создавать новую копию объекта с помощью ключевого слова 
рем, как показано в этом примере: 


// Создаем новый объект круга сігс1е и сохраняем 
// его в переменной туСігсі1е. 


уаг туСігс1Іе = пем Сігс1е (); 


Все данные этого круга теперь доступны в виде СВОЙСТВ: 


// Изменяем радиус. 
пуСігсіе.гааіџоѕ = 20; 


Можно пойти далее и передавать параметры функции с1хс1е(). Таким образом, 
создание объекта круга и установка его свойств осуществляется в одном шаге. 
В следующем коде приводится пример функции сіхс1е (), позволяющей устанавли- 
вать параметры. (Эта функция использовалась для создания кругов для примера, 
показанного на рис. 7.9.) 


Ғипсііоп Сігс1е (х, у, га1аз, со1ог) { 
Еһіѕ.х = х; 
$513.у = у; 
$51$.гаа1а$ = гаЧ1а$; 
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{51$.со1ог = со1оү; 
{51$.155е1есфеа = Еа1зе; 
} 


Свойство 155е1ескеа принимает значения +гое ИЛИ Еа1зе. Когда пользователь щел- 
кает на круге, свойству 1з5е1есфеа присваивается значение +гое, вследствие чего 
код рисования знает, что у данного круга нужно нарисовать другой контур. 


Объект круга с помощью этой версии функции сігс1е() можно создать посредст- 
вом такого кода: 


уаг туСігс1Іе = пем С1гс1е(0, 0, 20, "геа"); 


Но вся идея создания программы рисования кругов заключается в том, чтобы мож- 
но было рисовать не один круг, а сколько угодно. Это означает, что только одного 
объекта круга будет недостаточно, и нам нужно создать массив для хранения всех 
кругов. В данном примере эту задачу выполняет следующая глобальная пере- 
менная: 


уар слгс1ез = [1]; 


Оставшийся код не представляет ничего сложного. Когда пользователь нажи- 
мает кнопку Ааа Сшае, чтобы создать новый круг, вызывается функция 
адабападотсігс1е (), которая создает новый круг произвольного размера и цвета 
в произвольном месте холста: 


Ғопсёіоп ааабапаомсігс1е () { 
// Устанавливаем произвольный размер и позицию круга. 
уаг гаФлаз = гапаопЕготтТо (10, 60); 


уар х = гапаопЕготтТо (0, сапуаѕ.міаіёћ) ; 


уаг у = гапаотЕготтТо (0, сапуаз.һеісћі) ; 


// Окрашиваем круг произвольным цветом. 
уаг со1ог$ = ["агееп", "Б1ае", "геа", "уе11ом", "тадепёа", 
"огапае", "ргомп", "ригр1е", "ріпк"]; 


уаг со1ог = со1ог$ [капаотЕготтТо (0, 8)]; 


// Создаем новый круг. 


уаг сігс1Іе = пем Сігс1е (х, у, гадіцѕ, со1ог); 


// Сохраняем его в массиве. 


сігс1Іез.ризћһ (сігс1е); 


// Обновляем отображение круга. 
акаиСігс1еѕ (); 


} 


В этом коде применяется пользовательская функция гапаопЕготто (), которая гене- 
рирует произвольные числа в заданном диапазоне. (С полным кодом этой функции 
можно ознакомиться на сайте книги по адресу ћќёќр://уугу.ргоѕеѓесһ.сот/іті15/.) 
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Последним шагом в этой последовательности будет собственно прорисовка теку- 
щей коллекции кругов на холсте. Для этого после создания нового круга функция 
ааавапаотсігс1е () вызывает функцию агансігс1еѕ (), которая в свою очередь пере- 
бирает массив кругов с помощью следующего кода цикла: 


Ғог (уаг 1=0; і<сігсІеѕ.1епоёћ; 1++) { 
уаг сігсіе = с1гс1ез$[1]; 


} 


В коде используется цикл типа ѓо (см. разд. "Циклы" приложения 2). Блок кода 
в фигурных скобках исполняется для каждого круга в массиве. Чтобы с текущим 
кругом было удобно работать, первая строка кода сохраняет его в переменной. 


В следующем листинге приводится ПОЛНЫЙ код функции АгамС1тгс1ез (), которая 
прорисовывает на холсте текущую коллекцию кругов: 


Ғопсёіоп ЯкамС1гс1ез () { 
// Очищаем холст и подготавливаемся к рисованию. 
сопіехі.сІеагКесі (0, 0, сапуаѕ.міаёһ, сапуаѕ.һеідћі) ; 
сопіехі.д1ора1А1рһа = 0.85; 
сопіехі.ѕігокеѕіуІіе = "р1Іаск"; 


// Перебираем все круги. 
Ғог (хаг 1=0; і<сігс1еѕ.1епаёһ; 1++) { 
уар сігсіе = сігсіеѕ [1]; 


// Рисуем текущий круг. 

сопіехі .редіпрРаїћ (); 

сопіехі.агс (сігсІе.х, с1гс1е.у, сігсіе.гааіцѕ, 0, Маһ.РІ*2); 
сопіехі.Ғі115іуІе = сігс1е.со1ог; 

сопіехі. #111 (); 

сопіехі.зѕігоке (); 


ПРИМЕЧАНИЕ 


При каждом обновлении холста программа рисования сначала полностью очищает 
холст посредством метода с1еагКес+ (). Параноидные программисты могут ударить- 
ся в панику, что эта операция может вызвать мигание холста, когда все круги сначала 
исчезают с него, а потом отображаются снова в обновленном состоянии. Но их беспо- 
койство напрасно, т. к. холст оптимизирован с целью предотвратить эту проблему. 
В действительности на холсте ничего не очищается и не рисуется до тех пор, пока 
программа рисования не закончит свою работу, после чего она копирует конечный ре- 
зультат на холст одним плавным движением. 


Нарисованные нами круги еще не обладают интерактивностью, но страница уже 
содержит крайне важную структуру для отслеживания каждого нарисованного кру- 
га. То есть, хотя холст все еще является просто блоком цветных пикселов, код знает 
точное местонахождение набора кругов, содержащихся в холсте, а это означает, что 
он может манипулировать этими кругами в любое время. 
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В следующем разделе мы рассмотрим, как использовать эту систему, чтобы разре- 
шить пользователю выбирать круг. 


Проверка на столкновение 
посредством сравнения координат 


При работе с интерактивными фигурами почти наверняка нужно выполнять про- 
верку на столкновение, т. е. "столкнулась" ли данная точка одной фигуры с другой 
фигурой. В нашей программе рисования кругов нам нужно проверить, столкнулась 
ли точка, в которой щелкнули мышью, с кругом или же с пустым пространством 
холста. 


Сложные системы анимации (такие как предоставляемые Н1азВ и 5Пуегіеһ) облег- 
чают работу разработчика и сами выполняют проверку на столкновение. Также су- 
ществуют библиотеки расширения ЈауаЅстірі для холста (например, Ктейс 75), на- 
правленные на предоставление таких удобств, но на момент написания данной кни- 
ги ни одна из них не являлась достаточно развитой, чтобы ее можно было 
порекомендовать для применения. Поэтому на данное время фанатикам холста 
нужно разрабатывать собственную логику проверки на столкновение. 


При выполнении такой проверки для каждой фигуры нам нужно вычислить, не на- 
ходится ли проверяемая точка внутри пределов этой фигуры. Если находится, то 
точка, по которой щелкнули мышью, "столкнулась" с этой фигурой. Концептуаль- 
но, это линейный процесс, но подробности его реализации — вычисления для оп- 
ределения, щелкнули ли по данной фигуре — могут принять довольно неуклюжие 


формы. 

Первое, что нам требуется, — это цикл для перебора всех фигур. Этот цикл не- 
сколько отличается от цикла, используемого в функции агаиСігс1еѕ (): 

Ғог (уаг і=сігс1іеѕ.Іепадїћ-1; 1>=0; 1--) { 


уаг сігс1е = сігс1еѕ[і]; 


} 


Обратите внимание, что этот код перебирает объекты в массиве в обратном поряд- 
ке — от конца к началу. Проверка начинается с конечного элемента массива (ин- 
декс которого равен общему числу объектов в массиве минус единица) и ведет от- 
счет в обратном направлении к первому элементу (индекс которого равен 0). Для 
такого обратного направления цикла имеется причина. В частности, в большинстве 
приложений (включая и нашу программу рисования кругов) объекты отображаются 
на холсте в том порядке, в котором они хранятся в массиве. Это означает, что нари- 
сованные позже объекты накладываются на более ранние, а при накладывании объ- 
ектов щелчок получает тот объект, который находится сверху. 


Чтобы определить, попал ли щелчок в фигуру, нам нужно применить математику 
определенного уровня. В случае круга нам нужно вычислить расстояние по прямой 
ЛИНИИ ОТ ТОЧКИ, В которой щелкнули, до центра круга. Если это расстояние меньше 
или равно радиусу круга, тогда эта точка находится в пределах круга. 
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В данном примере веб-страница обрабатывает событие холста опсііск, чтобы про- 
верить столкновение точки, в которой щелкнули, с кругом. Щелчок по холсту акти- 
визирует функцию сапуа$С11ск (), которая вычисляет координаты точки, в которой 
щелкнули, а потом проверяет, не находятся ли они внутри какого-либо круга: 


Ғопсііоп сапуаѕСііск (е) { 
// Получаем координаты точки холста, в которой щелкнули. 
уаг с11СКХ = е.радех — сапуаз .оЕЕзе ее; 

ор; 


Е 


хаг сІіскҮ = е.радеу — сапуаз.оЁЁзѕеї1 


// Проверяем, щелкнули ли по кругу. 

Ғог (уаг і=сігс1Іеѕ.Іепоїћ; 1>0; 1--) { 
// С помощью теоремы Пифагора вычисляем расстояние от 
// точки, в которой щелкнули, до центра текущего круга. 


уаг аіѕіапсеЕготСепіег = Маһ. загі (Маєһ.рои (сігс1е.х — сІіскх, 2) + 
Маһ.ром(сігсІе.у — сІісКҮ, 2)) 


// Определяем, находится ли точка, в которой щелкнули, в данном круге. 
1Е (аіѕбапсеЕкотСепёег <= сігс1е.гадіџѕ) { 
// Сбрасываем предыдущий выбранный круг. 
1Е (ргеуіоцѕде1Іесіёеасігс1Іе != пи11) { 
ргеу1оизбе1есееЯС1тс1е.1з5е1есееа = Ёа15е; 


} 


ргеуіоизѕзбе1есіеасігс1Іе = с1тс1е; 


// Устанавливаем новый выбранный круг. 
сігсІе.ізѕЅе1Іесіеа = ігое; 

// Ордафе Ве аізр1ау. 

акамСігс1езѕ(); 


// Прекращаем проверку. 
геіигп; 


ПРИМЕЧАНИЕ 


Мы рассмотрим другой способ проверки на столкновение — через цвет пикселов — 
при создании игры "Лабиринт" в разд. "Проверка на столкновение с использованием 
цвета пикселов" далее в этой главе. 


Для завершения этого примера код рисования функции дгаксігсіеѕ () требует не- 
большой доводки. Теперь он должен обработать выбранный круг особым образом, 
т. е. нарисовать у него жирный контур: 


Ғипсііоп агамСігс1Іеѕ() { 
// Перебираем все круги. 


Ғог (уаг 1=0; і<сігс1еѕ.1епаёһ; 1++) { 


уар сігсіе = с1гс1ез[1]; 
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1Е (сігс1е.іѕЅе1есіеа) { 
сопёехё.1іпеміаёћ = 5; 


} 
е1зе { 
сопіехі.1іпейіаёһ = 1; 


} 


Этот пример можно улучшить множеством разнообразных способов и сделать его 
более интеллектуальным. Например, можно добавить панель инструментов 
с командами для редактирования выбранного круга, чтобы изменить его цвет или 
удалить с холста. Или же можно добавить возможность перетаскивания выбранно- 
го круга с одного места холста в другое. Для этого нужно просто отслеживать холст 
на событие опмоџѕеМоуе, изменить соответствующим образом координаты круга, а 
потом вызвать функцию агансігсіеѕ (), чтобы обновить холст с кругом в новом 
месте. (Этот метод является, по сути, вариантом логики обработки событий мыши в 
программе рисования, рассмотренной в разд. "Рисование на холсте" главы 6, с той 
разницей, что движения мыши используются не для рисования линии, а для пере- 
мещения фигуры.) На веб-сайте книги (см. В@р://Лууууу.ргозеесв/й 5) можно 
ознакомиться с кодом этого варианта примера (находится в файле НуегасйуеСисез _ 
У Ога». т), а также испытать его в действии. 


Подводя итоги, можно сказать следующее: отслеживание рисуемых объектов пре- 
доставляет разработчику неограниченную гибкость для их редактирования и ото- 
бражения в дальнейшем. 


Анимация на холсте 


Нарисовать одну картинку может казаться достаточно обескураживающей задачей. 
Поэтому не удивительно, что даже закаленные веб-разработчики рассматривают 
с определенным трепетом идею рисования нескольких десятков изображений каж- 
дую секунду. Основная трудность с анимацией СОСТОИТ В необходимости обновлять 
отображение содержимого холста достаточно быстро, чтобы оно выглядело нату- 
рально движущимся или изменяющимся. 


Анимация — это очевидная и необходимая составная часть для определенных ти- 
пов приложений, таких как игры в режиме реального времени и эмуляторы физиче- 
ских процессов. Но для намного более широкого диапазона страниц на основе хол- 
ста лучше применять более простые типы анимации. Так, анимацию можно исполь- 
зовать для выделения действий пользователя, например, подсвечивать фигуру при 
наведении на нее курсора мыши или заставлять ее пульсировать или мерцать. Ани- 
мацию также можно использовать для привлечения внимания к изменениям содер- 
жимого, например, постепенно вводить новый вид или создавать графики и диа- 
граммы, "вырастающие" в требуемую позицию. Такие способы использования ани- 
мации являются мощным средством для придания глянца веб-приложениям, 
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уменьшения времени их отзыва и даже их выделению на фоне множества интернет- 
конкурентов. 


Простая анимация 


Сделать анимацию из рисунка на холсте НТМІ5 достаточно просто. Для этого 
устанавливается таймер, который постоянно вызывает рисунок, обычно 30 или 
40 раз в секунду. При каждом вызове код полностью обновляет содержимое всего 
холста. Если код написан правильно, постоянно сменяющиеся кадры сольются 
в плавную, реалистичную анимацию. 


Јауа8сгірі предоставляет два способа для управления этим повторяющимся обнов- 
лением содержимого холста. 


П Функция ѕеётілеоџё (). Эта функция дает указание браузеру подождать не- 
сколько миллисекунд, а потом исполнить фрагмент кода, в данном случае код 
для обновления содержимого холста. По окончании исполнения кода функция 
зе-Т1меойе () выполняется опять, вновь вызывая код обновления холста, и так до 
тех пор, пока анимацию не нужно завершить. 


П Функция зеёїпбегуа1 (). Эта функция дает указание браузеру исполнять фраг- 
мент кода через регулярный интервал времени, например каждые 20 мс. Эффект 
от этой функции, по большому счету, такой же, как и от функции ѕеётітеоџё (), 
но функцию ѕебІпбегуа1 () нужно вызывать только один раз. Чтобы остановить 
повторяющийся вызов кода браузером, исполняется функция с1еагїпбегуа1 (). 


Если код рисования быстрый и эффективный, обе функции дают одинаковый эф- 
фект. В противном случае функция ѕебІпёегуа1 () даст лучший результат, выполняя 
обновление точно в требуемое время, но, возможно, за счет производительности. 
При худшем стечении обстоятельств, когда исполнение кода рисования занимает 
несколько больше времени, чем установленный интервал, браузер будет напрягать- 
ся, чтобы поспевать, код рисования будет исполняться постоянно и страница может 
на мгновение зависать. По этой причине в примерах этой главы будет применяться 
подход с использованием функции ѕебТітеоџ+ (). 


При вызове функции ѕеїтітеоџё () передаются два параметра: название функции, 
которою нужно выполнить, и период времени ожидания перед исполнением этой 
функции. Время ожидания указывается в миллисекундах (т. е. тысячных секунды), 
таким образом, 20 мс (обычная задержка при анимации) равняется 0,02 с. Далее 
показан пример такого кода анимации с использованием функции ѕебТтіпеоџ+ (): 


уаг сапуа$; 
хаг сопіехі; 


міпаом.оп1оаа = Ёопсііоп () { 


сапуаѕ = аосиптепі .деёЕ1емепіёВуІа ("сапуаѕ"); 
сопіехі = сапуаз .деЕСопіехі ("24"); 


// Обновляем холст через 0,02 секунды. 
ѕеТтітеои+ ("ЯгамЕгате () ", 20); 
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Этот вызов функции ѕзеїТіптеоиї () является ключевой частью любой задачи анима- 
ЦИИ. Допустим, что мы хотим создать анимацию квадрата, падающего сверху вниз 
страницы. Для этого нам нужно отслеживать позицию квадрата, используя две гло- 
бальные переменные: 


// Устанавливаем начальную позицию квадрата. 
хаг заџагеРозібіоп у = 0; 


хаг заџагеРозібіоп х = 10; 


Теперь нам надо просто изменять позицию при каждом исполнении функции 
агамҒопсёіопг (), а потом перерисовывать квадрат в НОВОЙ ПОЗИЦИИ: 


Ғопсёіоп ЯакамЕгате () { 
// Очищаем холст. 
сопіехі.сІеагКесі (0, 0, сапуаѕ.міаёєһ, сапуаѕ.һеідћі) ; 


// Вызываем метод редіпРаїһ (), чтобы убедиться, 
// что мы не рисуем часть уже нарисованного содержимого холста. 
сопіехі .редіп Раіћһ (); 


// Рисуем квадрат размером 10х10 пикселов в текущей позиции. 
сопіехі .гесї (заџоагеРоѕіёіоп х, ѕаџоагеРоѕібіоп у, 10, 10); 
сопіехі.1іпеѕіуІе = "Б1аск"; 

сопіехё.1іпейіаёһ = 1; 

сопёехі.зігоке () ; 


// Перемещаем квадрат вниз на 1 пиксел (где он будет 
// прорисован в следующем кадре). 
заоагеРозіііоп у += 1; 


// Рисуем следующий кадр через 20 миллисекунд. 
зеїТітеоџі ("агамЕгате ()", 20); 


} 


Результатом выполнения этого кода будет квадрат, подающий с верхнего края хол- 
стаи исчезающий после прохода через НИЖНИЙ край. 


Для более утонченной анимации потребуются более сложные вычисления. Напри- 
мер, предыдущий пример можно немного усложнить, ускоряя падение квадрата, 
чтобы эмулировать силу притяжения, или отскакивать от "пола", для чего потребу- 
ются более сложные математические расчеты, чем для единообразного движения 
вниз. Но основной подход — установка таймера, вызов функции рисования и об- 
новление содержимого всего холста — остается точно таким же. 


Анимация нескольких объектов 


Теперь, когда мы освоили основы анимации и рисования интерактивной графики 
на холсте, настало время сделать следующий шаг и совместить эти навыки. Сдела- 
ем мы это на примере программы анимации падающих "мячиков" (рис. 7.10). 
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В этой программе используется уже знакомый нам по предыдущему разделу метод 
зеЕТ1меоийе (), НО сейчас код рисования должен управлять практически неограни- 
ченным количеством падающих мячиков. 


(Ч Апітайоп о Ч Апітайбоп \© 


< С © Апітаїопћті А < С © Апітаїопћті А 


е:; | 5% 
Ф И 
оо 


| Ада Вай | Сіваг Сапмзѕ | Аба Вай Сіеаг Сапмаз 


Ва Ѕіғе: 15 - СоппесЕ Ваз Вай Ѕіғе: 15 2 | СоппесЕ Ва! 


Рис. 7.10. Эта программа анимации позволяет добавлять в холст неограниченное количество мячиков. 
Программа предоставляет опцию выбора размера мячика (радиус по умолчанию — 15 пикселов) 
и соединения мячиков линиями, как показано справа на рисунке. Каждый добавленный в холст мячик 
двигается независимо от других, падая с ускорением, пока не столкнется с нижним краем холста, 
потом отскакивает от него и начинает двигаться в другом направлении 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Производительность анимации 


Так как для анимации требуется постоянно обновлять нарисованную графику, очевид- 
но, что эта задача будет намного требовательней к возможностям холста, чем обыч- 
ное рисование. Но холст справляется с этой трудной задачей на удивление хорошо. 
В современных браузерах применяются такие средства повышения производительно- 
сти, как аппаратное ускорение, при котором определенный объем обработки графики 
передается видеокарте компьютера, вместо применения центрального процессора 
для выполнения всех задач. И хотя Чауа$сир{ — не самый быстрый из языков про- 
граммирования, на нем вполне можно создавать сложные высокоскоростные анима- 
ции, включая аркадные игры в режиме реального времени, не используя ничего, кроме 
кода сценариев и холста. 


Но производительность холста может быть проблемой в случае маломощных мо- 
бильных устройств, таких как іІРһопе или устройства с операционной системой Апаго!а. 
Результаты тестов показывают, что анимация, которая может выполняться на на- 
стольном компьютере со скоростью 60 кадр/с (кадров в секунду), будет исполняться 
на смартфоне рывками, с максимальной скоростью 10 кадр/с. Поэтому, если вы хотите 
создавать приложения для мобильных устройств, прежде чем углубляться в разработ- 
ку, обязательно протестируйте их производительность для таких устройств и будьте 
готовы пожертвовать некоторыми второстепенными украшениями анимационной про- 
граммы, чтобы ее основная функция работала без проблем. 
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СовеТ 


Судить о возможностях анимации невозможно по изображению, да еще и черно- 
белому. Чтобы увидеть, как анимация, представленная картинкой на рис. 7.10, выгля- 
дит в действительности, испытайте ее в действии на веб-сайте этой книги по адресу 
ВЕр:/Лммим/.ргозесй.сопт/Ит5/. 


Для управления всеми этими шариками мы воспользуемся пользовательским объ- 
ектом, рассмотренным в разд. "Отслеживание нарисованного содержимого" ранее 
в этой главе. Только в данном случае нам нужно отслеживать массив объектов 
мячика и кроме позиции (представляемой свойствами х и у) для каждого мячика 
надо еще отслеживать и скорость (представляемую свойствами ах и ау): 


// Данные, представляющие отдельный мячик. 
Ғипсііоп Ва11 (х, у, х, ау, га@1аз) { 


ЕҺіѕ.х = х; 


$513.у = у; 

һіѕ.ах = ах; 

ћһіѕ.аӢу = ау; 
һіѕ.гааіоѕ = гаЧ1а$; 
һіѕ.соїог = "геа"; 


// Массив, содержащий информацию обо всех мячиках на холсте. 


уаг ра11ѕ = []; 


ПРИМЕЧАНИЕ 


В математике выражение ах обозначает скорость изменения абсциссы, а ау — ско- 
рость изменения ординаты. Поэтому по мере падения мячика значение х для каждого 
кадра увеличивается на величину ах, а значение у — на величину ду. 


При нажатии кнопки Ааа Вай простой код создает новый объект мячика ра11 и со- 
храняет его в массиве ра11: 


Ғопсёіоп ааава11 () { 
// Устанавливаем размер мячика. 


уаг гаЧ1аз = рагзеЕ1оа® (аоситепі .дчееЕ1етепЕВуТа ("ра11517е") .уа1пе); 


// Создаем новый мячик. 
уаг ра11 = пем Ва11 (50,50,1,1, хаа1 аз) ; 


// Сохраняем его в массиве Ъа11$. 
ра115.риѕћһ (ра11); 
} 


Кроме очистки холста, кнопка СІеаг Сапуаѕ также очищает массив ра115: 


Ғопсёіоп с1еахВа11$() { 
// Удаляем все мячики. 
ра11ѕ = |]; 
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Но ни функция ааава11 (), ни функция с1еагВа11з() в действительности не только 
ничего не рисует, но даже не вызывает функцию для рисования. Вместо этого код 
страницы устроен таким образом, чтобы вызывать функцию адгамЕгате (), которая 
прорисовывает холст каждые 20 мс: 


уат сапуазѕ; 


хаг сопіехі; 


міпаоим.оп1оаа = Ёопсііоп () { 


сапуаѕ = аосиотепі .деёЕ1емепіёВуІа ("сапуаѕ"); 
сопіехі = сапуаз .деЕСопіехі ("24"); 


// Перерисовываем холст каждые 20 миллисекунд. 
зеі Тлмеойе ("агамЕгате ()", 20); 


}; 


Функция агамЕгате () является ключевой частью этого примера. Она не только ри- 
сует мячики на холсте, но также и вычисляет их текущую позицию и скорость. 
В функции агамЕгате () выполняется несколько разных вычислений, чтобы более 
реалистично эмулировать движение мячиков, например, ускорение мячиков при 
падении и замедление, когда они отскакивают от препятствий. Полный код функ- 
ции выглядит так: 


Ғопсііоп агамЕгапе () { // Очищаем холст. 


Г 


сопіехі.сІеагКесі (0, 0, сапуаѕ.міаёєһ, сапуаѕ.һеідћі) ; 
сопіехі .редіпрРаїћ () 


// Перебираем все мячики. 
Ғог (хаг 1=0; і<ра115.1епоїһ; 1++) { 
// Перемещаем каждый мячик в его новую позицию. 
уаг ра11 = ра115[1]; 
ра11.х += ра11.ах; 
ра11.у += ра11.ау; 


// Добавляем эффект "гравитации", который ускоряет падение мячика. 
1Е ((ра11.у) < сапуаѕ.һеідһё) ра11.ӣу += 0.22; 


// Добавляем эффект "трения", который замедляет боковое движение. 
ра11.ах = ра11.ах * 0.998; 


// Если мячик натолкнулся на край холста, отбиваем его. 
1Е ((ра11.х + ра11.гааіоѕ > сапуаѕ.міаёћһ) | | 

(ра11.х — Ба11.кад1аз < 0)) { 

ра11.ах = -Ба11.ах; 


// Если мячик упал на низ холста, отбиваем его, 


// но слегка уменьшаем скорость. 
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1Е ((ра11.у + ра11.гааіоѕ > сапуазѕ.һеідћі) | | 
(ра11.у — Ба11.хаа1аз < 0)) { 
Ба11.ау = -Ба11.ау*0.96; 


// Проверяем, хочет ли пользователь соединительные линии. 
1Е (! аосотмепіё.сдеіЕ1етепіВутІа ("соппесёедВа115") .сһескеа) { 
сопіехі.редіп Раёћ (); 
сопіехі.#і115іуІе = ра11.#1і11Со1ог; 


} 
е1зе { сопбехЕ.{Е11156у1е = "ирлее"; } 


// Рисуем мячик. 

сопіехі.агс (ра11.х, ра11.у, ра11.гаа1аз, 0, Маћ.РІХ2); 
сопіехё.1іпейіаёһ = 1; 

сопіехі.Ғі11 (); 

сопіехі.зѕігоке (); 


// Рисуем следующий кадр через 20 миллисекунд. 
зеіТітеоџиі+ ("ЯагамЕгате ()", 20); 


СОВЕТ 


Ознакомиться с описанием логических операторов можно в табл. П2.1 (см. приложе- 
ние 2). 


Хотя весь этот объем кода может вызывать легкий страх, общий подход остался 
прежним. Код исполняет следующие операции: 


1. Очищает холст. 
. Перебирает в цикле мячики в массиве. 
Корректирует позицию и скорость каждого мячика. 


2 

3. 

4. Рисует каждый мячик на холсте. 

5. Устанавливает время ожидания (функция ѕеітітеоџё ()) для вызова метода 
асгамЕгате () ОПЯТЬ 20 ме. 


Сложным здесь является шаг 3, в котором корректируются позиция и скорость мя- 
чиков. Уровень сложности этого кода может быть таким, каким этот код пожелает 
разработчик, в зависимости от эффектов, которые он пытается реализовать. Осо- 
бенно трудно поддается моделированию плавное, природное движение, требующее 
более сложных математических вычислений. 


Наконец, теперь, когда мы можем отслеживать каждый мячик, добавить интерак- 
тивность не составляет труда. По сути, можно использовать практически тот же 
код, который применяется для определения щелчков по кругу в программе рисова- 
ния кругов (см. разд. "Проверка на столкновение посредством сравнения коорди- 
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нат" ранее в этой главе). Но только в данном случае мы хотим делать что-то дру- 
гое с мячиком, по которому щелкнули, например ускорить или изменить направле- 
ние его движения. (В версии этого примера, которую можно загрузить с сайта кни- 
ги Һер://уууу.ргоѕеѓіесьЉёті5, мячик, по которому щелкнули, изменяет движение.) 
Еще одну, довольно впечатляющую версию этого примера, можно исследовать по 
адресу ћќр://іпуогі.сот/6Ььуупк5. Здесь наведение курсора мыши на мячики раз- 
брасывает их в разные стороны (как именно — зависит от того, каким образом на- 
водится на них курсор), а если отвести курсор, мячики собираются в слово 
"Сооз]е". Если вам и этого мало, то другие примеры анимации можно посмотреть 
по адресу ВИр://ууууу.Моб5аПа4.е (размножающиеся капли) и В@р:// туп .сот/ 
сгпЗеа (несколько банальные летающие звезды). 


ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Анимация на холсте для занятых (или ленивых) 


Мне действительно нужно выполнять все вычисления самому? 


Самый значительный недостаток анимации на холсте состоит в необходимости вы- 
полнять все вычисления самому разработчику. Например, если нужно, чтобы изобра- 
жение двигалось от одной стороны холста к другой, разработчику надо рассчитать ко- 
ординаты каждого кадра, а потом нарисовать его в соответствующей позиции. А если 
требуется анимировать одновременно несколько предметов разными способами, 
объем и сложность необходимых для этого вычислений могут очень быстро выйти из 
под контроля. Поэтому намного легче жизнь разработчиков, использующих подклю- 
чаемый модуль, такой как Еіаѕћ или 511мепідћќ. Обе технологии имеют встроенную сис- 
тему анимации, которая позволяет разработчикам давать команды наподобие "пере- 
местить эту фигуру из этой точки в ту за 45 секунд" или, еще лучше, "переместить эту 
фигуру от верхнего края окна к нижнему, применяя эффект ускорения, вследствие ко- 
торого фигура слегка отскакивает, достигнув нижнего края". 


Нет сомнений, что однажды кто-то изобретет высокоуровневую систему анимации, ко- 
торую можно будет наложить поверх холста. В идеальном случае такая система ани- 
мации позволит разработчику реализовывать желаемые эффекты, не требуя написа- 
ния многочисленных страниц кода для математических вычислений. Вероятнее всего, 
что такой высокоуровневой системой анимации будет не усовершенствование основ- 
ной спецификации НТМЕ, а библиотека Јауа$сгірї. Но на данном этапе слишком рано 
говорить, какие средства разработки будут наиболее эффективными, с наименьшим 
количеством ошибок и с наивысшим уровнем поддержки. 


Практический пример: игра "Лабиринт" 


До сих пор мы изучали, каким образом применить к холсту некоторые ключевые 
методы программирования, чтобы демонстрировать интерактивные рисунки и ани- 
мацию. Эти методы позволяют использовать холст не только для простого рисова- 
ния, но и создавать на его основе завершенные, автономные приложения, такие как 
игры или мини-приложения в стиле Еаѕһ. 


На рис. 7.11 показан более амбициозный пример интерактивности и анимации, для 
реализации которого применяются все приобретенные нами на данный момент зна- 
ния. Это простая игра, в которой пользователь должен провести значок через лаби- 
ринт. Значок начинает двигаться в определенном направлении после нажатия кла- 
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виши со стрелкой и продолжает перемещаться, пока не столкнется со "стеной" ла- 
биринта. Для продолжения движения нужно нажать клавишу со стрелкой в направ- 
лении, в котором нет препятствий. 


=" (=) 
14) САНТМЕ$\ Свариег 07\Мазе. нет! х-сх 
ё Сапуаѕ Маге бате | | 
| оа Еазу Маге | [оаа Нага Маге | 
410% ~ к. 


Рис. 7.11. Интерактивная игра в лабиринт на основе холста с анимацией. С точки зрения посетителя 
веб-страницы это забавная игра, а с точки зрения разработчика это эффективное использование 
возможностей холста НТМЕ5 и искусного программирования на Јауа$сгірї 


Но, как всегда, здесь есть свой подводный камень: использование холста для созда- 
ния сложного приложения требует от разработчика перелопатить значительный 
объем кода. В следующих разделах мы изучим основные моменты создания этого 
приложения, но будьте готовы хорошенько попотеть с программированием 
Јауа$сгір. 


ПРИМЕЧАНИЕ 


Этот пример можно запустить на локальном компьютере в Іпіегпеѓ Ехріогег 9 или 
Орега 11.х. Но в других браузерах он будет работать только с веб-сервера. Во избе- 
жание этих проблем рекомендуется запускать пример с сайта книги — 
ћіїр://му.ргоѕеїесһ.сот/һіті5/. 
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Подготовительные работы 


Прежде чем анимировать что-либо, нам нужно создать для этого соответствующие 
условия, подготовив должным образом холст. Хотя весь лабиринт можно было бы 
нарисовать на холсте линиями и прямоугольниками, для этого потребовался бы 
внушительный объем кода, написание которого вручную будет чрезвычайно дол- 
гим и утомительным процессом. Для этого нужно составить логическую модель 
всего лабиринта, а потом вырисовывать каждую его часть отдельной операцией. 
Для этого подхода почти наверняка потребуется инструмент для автоматического 
создания кода рисования. Например, лабиринт можно будет нарисовать в Адобе 
Шоѕігаѓог, а потом преобразовать его в код для холста с помощью какого-либо мо- 
дуля расширения (см. врезку "Часто задаваемый вопрос. Рисование на холсте для 
тех, кто ненавидит математику" главы 6). 


Другой вариант — взять готовую графику лабиринта и прорисовать ее на холсте. 
Этот подход будет особенно легким, т. к. Интернет изобилует бесплатными стра- 
ницами для создания лабиринтов. Найти такие страницы очень легко — просто вы- 
полните поиск в Соо е по словам "генератор лабиринтов" или "тале сепегают", и 
вы получите буквально тысячи ссылок. Выбрав понравившийся вам генератор, 
укажите несколько параметров (например, размер, форму, цвета, плотность и 
сложность лабиринта), нажмите кнопку Создать, и в считанные секунды вы полу- 
чите рисунок лабиринта, который можно сохранить на своем компьютере. 


В нашем примере используется готовый рисунок лабиринта. При загрузке страни- 
цы код отображает этот рисунок (хранящийся в файле тахе.рпо) на холсте. Далее 
приводится код, который запускает этот процесс при загрузке страницы: 


// Определяем глобальные переменные для холста и контекста рисования. 
уаг сапуаз; 


хаг сопіехі; 


міпаои.оп1оаа = Ёопсііоп () { 


// Подготавливаем холст. 


сапуаѕ = Аосимеп® .десЕ1етепеВуТа ("сапуаѕ"); 
сопіехі = сапуаз .деЕСопіехі ("24"); 


// Рисуем фон лабиринта. 
ЯгамМате ("таге.рпо", 268, 5); 


// При нажатии клавиши исполняем функцию ргосеѕѕКеу (). 


м1паом.опкеуаомт = ргосеззКеу; 


}; 
В действительности этот код не рисует фон лабиринта, а вызывает для этого дру- 
гую функцию — акамМате (). 


Использование в этом примере отдельной функции рисования лабиринта означает, 
что он не ограничен одним видом лабиринта, а позволяет загрузить любую картин- 
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ку лабиринта. Для этого нужно просто вызвать функцию агазМате () и передать ей 
название файла изображения лабиринта и координаты начала его прохождения. 
В следующем листинге приведен код этой функции: 


// Отслеживаем текушую позицию значка. 
уар х = 0; 


уаг у = 0; 


Ғипсііоп агамМате (тахеЕ11е, зіагіёіпдх, зіагііпдү) { 
// Загружаем изображение лабиринта. 
іпдМағе = пем Ітаде (); 
19Мате.оп1оаа = Ёџпсёіоп() { 
// Изменяем размер холста в соответствии 
// с размером изображения лабиринта 
сапуаз.м1аЕВ = ітоМағле.міаёһ; 
сапуаѕ.һеісһі = ітоМағе.Һеідһі; 


// Рисуем лабиринт. 


уаг іпдЕасе = дӢоситепі .деЕЕ1епепЕВуІа ("Ғасе"); 


сопіехі .дӢгамІпаде (1иа9Мате, 0, 0); 


// Рисуем значок. 

х = зёагііпах; 

у = зіагііпдү; 

сопіехі .дӢгамІпаде (1таРасе, х, у); 
сопіехі.зігоке (); 


// Рисуем следующий кадр через 10 миллисекунд. 
зеіТітеоиё ("дгамЕгате ()", 10); 
}; 


ітадМағе.ѕгс = пахеҒі1е; 


В коде используется двухэтапный метод рисования изображения на холсте, рас- 
смотренный в разд. "Вставка в холст изображений" ранее в этой главе. Сначала 
определяется функция для обработки события изображения опіоаа и последующего 
отображения загруженного изображения на холсте. Потом устанавливается атрибут 
іпс объекта изображения, что загружает изображение и активирует код. Этот двух- 
этапный процесс немного посложнее, чем просто получение изображения из скры- 
того элемента <1та> на странице, но он необходим для создания функции, позво- 
ляющей загружать любое изображение лабиринта. 


После загрузки изображения лабиринта код подгоняет размер холста к размеру 
изображения, устанавливает значок в исходную позицию, а потом прорисовывает 
ее на холсте. Наконец, вызывается метод ѕеіТітеои+ (), чтобы начать показ кадров 
анимации. 
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ПРИМЕЧАНИЕ 


Версия этого примера, которую можно загрузить на сайте книги (ВИр:/\м\мим. 
ргоѕеїесһћ.сот/һїіті5/), немного утонченнее. Она разрешает пользователю загрузить 
новый лабиринт в любое время, даже в процессе его прохождения. Для этого в функ- 
ЦИЮ дгамМахе () добавлен дополнительный код, который останавливает значок (если 
в данный момент он находится в движении) и прекращает процесс анимации, прежде 
чем загрузить новый лабиринт и снова начать его прохождение. 


Анимация значка 


Процесс прохождения лабиринта начинается, когда пользователь нажмет одну из 
клавиш со стрелками. Например, при нажатии клавиши => значок начинает дви- 
гаться вниз, пока не натолкнется на препятствие или не будет нажата другая кла- 
виша. 


Для этого в коде используются две глобальные переменные для отслеживания ско- 
рости значка, иными словами, количества пикселов, на которое она смещается по 
оси х или у в каждом кадре. Эти переменные называются ах и ау, точно так же, как 
в примере с падающими мячиками из разд. "Анимация нескольких объектов" ранее 
в этой главе, но с той разницей, что для их хранения не требуется массив, т. к. 
нужно отслеживать всего лишь один движущийся объект: 


уаг ах = 0; 


уаг Чу = 0; 


Когда пользователь нажимает какую-либо клавишу, холст вызывает функцию 
ргосеззКкеу(). Эта функция проверяет, не была ли нажата одна из клавиш со стрел- 
кой, и если была, изменяет направление движения значка. Чтобы определить, какая 
именно клавиша со стрелкой была нажата, проверяется код нажатой клавиши. На- 
пример, код 38 соответствует клавише <7>. Функция ргосеззКеу() игнорирует все 
клавиши, за исключением клавиш со стрелками: 


Ғипсііоп ргосеззКеу(е) { 


// Если значок находится в движении, останавливаем его. 
ах = 0; 
ау = 0; 


// Нажата стрелка вверх, начинаем двигаться вверх. 
1Е (е.КеуСоае == 38) { 
Ау = -1; 


// Нажата стрелка вниз, начинаем двигаться вниз. 
1Е (е.КеуСоае == 40) { 
Ау = 1; 


// Нажата стрелка влево, начинаем двигаться влево. 
1Е (е.КеуСоае == 37) { 
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// Нажата стрелка вправо, начинаем двигаться вправо. 
1Е (е.КеуСоае == 39) { 
ах = 1; 


} 


Функция ргосеззКеу() не меняет текущую позицию значка и не пытается обновить 
ее отображение на холсте. Эта задача осуществляется функцией акамЕкапе (), КОТО- 
рая вызывается каждые 10 мс. 


Код функции аганҒгате () довольно простой, но всеохватывающий, решающий 
несколько задач. Прежде всего, он проверяет, движется ли значок в каком-либо на- 
правлении. Если не движется, то функция, по сути, ничего не делает: 


Ғопсёіоп акамЕгате () { 
ТЕ (ах != 0 [| ау != 0) { 


Если же значок движется, то функция агамЕасе () закрашивает желтым цветом те- 
кущую позицию значка, создавая, таким образом, след после продвижения. Потом 
значок перемещается в новую позицию: 


сопіехі .редіпрРаїћ (); 

сопіехі.Ғі115іуІе = "гар (254,244,207)"; 
сопёехі.гесі (х, у, 15, 15); 
сопёбехі. #111 () 


// Обновляем координаты значка. 
х += ах; 
у += ау; 


Затем код вызывает функцию сһескЕогСо11ізѕіоп (), чтобы проверить новую пози- 
ЦИЮ. (Код этой функции проверки на столкновение рассматривается в следующем 
разделе.) Если новая позиция не верна, это означает, что значок столкнулся с пре- 
градой, и ее нужно возвратить назад в старую позицию и прекратить движение: 


1Е (сһескЕогСо111іѕіоп()) { 


х -= ах; 
у -= ау; 
ах = 0; 
Ау = 0; 


} 


Теперь все готово для рисования значка: 


уаг іпдЕасе = доситепі .десЕ1етерЕВуТа ("Расе") ; 
сопіехі .АгамТтаае (1таРасе, х, у); 


Потом проверяется, не вышел ли значок за пределы лабиринта, т. е. прошел его. 
Если вышел, то выводится соответствующее сообщение: 
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1Е (у > (сапуаѕ.һеідһі — 17)) { 
аїегі ("Уой міп!"); 
геёигп; 


} 


В противном случае код устанавливает время ожидания для вызова метода 
ахамҒгате () опять 10 мс. 


// Рисуем следующий кадр через 10 миллисекунд. 
зеіТітеоиё ("ЯгамЕгаше ()", 10); } 


На данном этапе мы рассмотрели весь код для игры в лабиринт, за исключением 
логики функции сһескЕогСо11ізѕіоп (), которая выполняет проверку на столкновение 
значка с преградой. Эта тема обсуждается в следующем разделе. 


Проверка на столкновение 
с использованием цвета пикселов 


Ранее в этой главе вы увидели, как можно выполнять проверку на столкновение 
посредством математических вычислений. Но это можно сделать и другим спосо- 
бом. Вместо того чтобы просматривать коллекцию нарисованных объектов, можно 
исследовать цвет блока пикселов. В некоторых отношениях этот подход более про- 
стой, т. к. для него не требуется обрабатывать все объекты и код для отслеживания 
позиции объекта. Но он будет работать только в случае четко определенных пред- 
положений об исследуемых цветах. 


ПРИМЕЧАНИЕ 


Проверка на столкновение посредством тестирования пикселов является идеальным 
способом для применения в игре "Лабиринт". С помощью этого метода можно опреде- 
лить, когда значок столкнулся со стеной лабиринта черного цвета. Если бы не этот 
метод, то нужно было бы сохранить всю информацию о лабиринте в памяти, а потом 
определять, не перекрывают ли координаты значка линии стен лабиринта. 


Метод проверки на столкновения посредством анализа цвета пикселов возможен 
благодаря предоставляемой холстом возможности манипулировать отдельными 
пикселами, из которых состоит любое изображение. Контекст рисования имеет три 
метода для манипулирования пикселами: одебїІтадераѓа (), риоёІтадераёа() И 
сгеакеТтадерафка (). Метод аеЕТтадерафа () применяется для захвата пикселов прямо- 
угольной области холста. Захваченные пикселы можно изменить и вставить обрат- 
но в холст с помощью метода риёІтаадераёѓа (). А метод сгеаёеІтадераѓа () позволяет 
создать в памяти новый, пустой блок пикселов, которые можно изменить, а потом 
вставить в холст посредством метода роёІтадераѓа (). 


Чтобы лучше разобраться с этими методами для манипулирования пикселами, рас- 
смотрим пример. Сначала с помощью метода сеіІтасдераѓба () захватываются пиксе- 
лы прямоугольной области холста размером 100х50 пикселов: 


// Захватываем пикселы прямоугольника размером 100х50, 
// левый верхний угол которого находится в точке (0, 0). 


уаг 1падерафа = сопіехі.сдеіІтадераіёа (0, 0, 100, 50); 
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Потом посредством свойства да+а в числовой массив р1хе1з помещаются данные 
о пикселах этого прямоугольника: 


уаг ріхе1ѕ = ітадераёа.ааѓа; 


Если вы ожидаете, что каждый пиксел представляется одним числом, то ошибае- 
тесь. Каждый пиксел представляется четырьмя числами — тремя для красной, зе- 
леной и синей цветовых составляющих и одним для прозрачности. Поэтому, чтобы 
исследовать каждый пиксел, нам требуется ЦИКЛ, который проходит через массив 
с шагом в четыре элемента: 


// Перебираем все пикселы и инвертируем их цвет. 


Ғог (уаг і = 0, п = ріхе1ѕ.іепдіһ; і < п; і += 4) { 


// Получаем данные для одного пиксела. 


уаг геа = 
уаг дгееп = 
уаг Ю]1ае = 


уаг а1Ірһа = 


ріхе15[1]; 
ріхе15[1+1]; 
ріхе15[1+2]; 


ріхе15[1+3]; 


// Инвертируем цвета. 


р1хе1$[1 = 255 — геа; 
ріхе15[1+1] = 255 — огееп; 
ріхе15[1+2] = 255 — ше; 


} 


Каждая составляющая цвета представляется числом в диапазоне от 0 до 255. В при- 
веденном коде используется самый простой метод манипулирования пикселами — 
инверсия цвета. Результатом такой манипуляции является негативное изображение 
исходного рисунка. 


Чтобы воочию увидеть результаты манипуляции, пикселы можно вставить в их ис- 
ходное место в холсте (хотя с такой же легкостью их можно нарисовать в любом 
другом месте холста): 


сопіехі .расТиадерака (1тадерафа, 0, 0); 


Методы манипулирования пикселами, определенно, обеспечивают разработчику 
высокий уровень контроля над содержимым. Но они также имеют и недостатки. 
Пиксельные операции медленные, в то время как объем пиксельных данных в 
среднем холсте огромен. Если захватить большую область изображения для иссле- 
дования, то она будет содержать десятки тысяч пикселов. И если вы находите 
утомляющим рисование сложных фигур с помощью базовых составляющих, таких 
как прямые и кривые линии, то обработка отдельных пикселов — еще более утоми- 
тельный процесс. 


Но при всем этом методы манипулирования пикселами позволяют решать опреде- 
ленные задачи, решения которых иными способами было бы проблематичным. На- 
пример, они предоставляют самый легкий способ создания фрактальных узоров 
и фильтров для изображений в стиле Рһоќоѕһћор. А для нашей программы "Лаби- 
ринт" они дают возможность создать короткую процедуру для проверки столк- 
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новения значка со стеной лабиринта. Выполняющая эту работу функция 
сһескЕогСо11іѕіоп () выглядит так: 


Ғопсёіоп сһесКЕогСо11іѕіоп() { 
// Захватываем блок пикселов под значком, слегка 


// превышающий размер значка. 


уаг іпдраа = сопіехі.сдеіІтадераёа (х-1, у-1, 15+2, 15+2); 
уаг ріхе1ѕ = 1иарафа.Чафа; 


// Проверяем эти пикселы. 
Ғог (уаг і = 0; п = ріхе1ѕ.Іепадіћ, і < п; і += 4) { 


уаг геа = ріхе15[1]; 
уаг дгееп = р1хе1$[1+1]; 
уаг ріџе = р1хе1$[1+2]; 


уаг аірһа = ріхе15[1+3]; 
// Смотрим на наличие черного цвета стены, что указывает 
// на столкновение. 
1Е (теа == 0 && агееп == 0 && Бае == 0) { 
тегиги стае; 
} 
// Смотрим на наличие серого цвета краев, что указывает 
// на столкновение. 
1Е (геа == 169 && дгееп == 169 && Б1ае == 169) { 


тебатп Егае; 


} 
// Столкновения не было. 


геіогп Еа1зе; 


} 


Итак, обсуждение программы "Лабиринт" завершено. Это были самый длинный 
код и самый объемный пример в этой книге. Вам, возможно, придется покопаться 
в нем немного (или освежить свои знания Јауа$сгірі), прежде чем вы все оконча- 
тельно поймете в нем. Но приобретя такую уверенность, вы сможете применять 
подобные методы в собственных разработках на основе холста. 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
Сногсшибательные примеры работы с холстом 


Диапазон творческих возможностей холста практически неограничен. Интернет со- 
держит огромное множество еще более амбициозных примеров работы с холстом, ко- 
торые демонстрируют высшее мастерство кодирования на НТМЕ5. Далее приведен 
список некоторых веб-сайтов, демонстрирующих потрясающие примеры волшебства 
с холстом. 


• Образцы игр на основе холста. Этот сайт содержит столько увлекательных при- 
меров разработок на основе холста, что вы не сможете оторваться от экрана. 
Можно порекомендовать начать знакомство с этим сайтом с игры Мщап{ Хотбіе 
Мазег$ или инструмента для построения графиков биржевых котировок ТіскегРіої. 
Адрес сайта — ммм. сапуаздето$.сот. 
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Карта знаний Википедии. Это впечатляющее приложение на основе холста гра- 
фически представляет статьи английской Википедии, где связанные темы соеди- 
няются тонкими линиями, похожими на паутину. При выборе новой темы соответ- 
ствующая часть карты знаний помещается в центр страницы посредством плавной 
анимации. Адрес сайта — ћќр://еп.іпѓіогаріа.ого. 


Трехмерный лабиринт. В этой игре вы ходите с автоматом наперевес по просто- 
му трехмерному лабиринту, наподобие древней З0-игры \Моіѓепѕїеіп, которая от- 
крыла повальное увлечение стрелялками в далеком 1992г. Адрес сайта — 
м/млм.беп]оНе.сот/соде/Чето$/сапуазсаре. 


Шахматы. В этой НТМЕ5-игре вы можете испытать свои шахматные способности 
против компьютерного противника на нарисованной на холсте доске, которую мож- 
но представить как в трехмерном, так и в двухмерном измерении. Адрес сайта — 
В@р://пит!спе$$.зоигсеогде.пе/аето/ехатр!е.Пит1. 


ГЛАВА 8 


Совершенствование стилей 
с помощью С$$3 


Почти бессмысленно пытаться создать современный веб-сайт, не используя воз- 
можностей С$5 (Сазсадте 54Уе ЗВеей. Этот стандарт воткан в ткань Всемирной 
сети почти так же плотно, как и НТМІ. Каскадные таблицы стилей являются 
основным средством для любого типа деятельности в области веб-дизайна, будь то 
компоновка страниц, создание интерактивных кнопок и меню или простое декори- 
рование. По сути, в то время как фокус НТМЕ все больше смещается на содержи- 
мое и семантику (см. разд. "Что такое семантические элементы?" главы 2), спе- 
цификация С85 стала центральной технологией веб-дизайна, т. е. оформления. 


По пути, спецификация С58 стала более сложной и с более широким диапазоном 
охвата. Описание версии С5$ 2.1 было в пять раз больше по сравнению с описани- 
ем предыдущей. К счастью, создатели стандарта СЗЗ пошли иным путем, нежели 
обычное увеличение описания будущих возможностей. Они распределили усовер- 
шенствованные функции следующего поколения по наборам индивидуальных 
стандартов, называющихся модулями. Таким образом, разработчики браузеров мо- 
гут реализовывать наиболее интересные и популярные части стандарта в первую 
очередь (что они и так уже делали, с модулями или без них). Всем этим новым мо- 
дулям С$5 было присвоено коллективное название С553 (обратите внимание на 
необычное отсутствие пробела, как и с НТМГ5). 


Спецификация С$53 содержит около 50 модулей разной степени завершенности. 
Возможности этих модулей широки: от предоставления декоративного оформления 
(такого как расширенные шрифты и анимация) до реализации более специализиро- 
ванного функционала (например, чтение текста или изменение стилей в зависимо- 
сти от возможностей компьютера или мобильного устройства). В целом, эти моду- 
ли содержат как надежно поддерживаемые возможности самыми последними вер- 
сиями всех современных браузеров, так и экспериментальные. 


В этой главе мы рассмотрим самые важные (и лучше всего поддерживаемые) части 
спецификации С$53. Первым делом мы научимся выводить текст практически лю- 
бым шрифтом. Потом мы узнаем, как адаптировать стили под браузерные окна раз- 
ных размеров и разные типы устройств, такие как 1Раа и 1Рвопе. Далее мы рассмот- 
рим, как использовать тени, скруглять углы и улучшать внешний вид окон. Нако- 
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нец, мы научимся использовать переходы для создания утонченных эффектов при 
выделении элемента управления посредством наведения на него курсора, щелчком 
или с помощью клавиши <Таб>. (И все эти эффекты мы сможем сделать даже луч- 
ше с помощью еще двух возможностей С$53 — трансформаций и прозрачности.) 


Но прежде чем мы приступим к изучению и реализации этих захватывающих 
новых возможностей, нам нужно уделить время тому, как использовать эти воз- 
можности в разрабатываемых веб-сайтах, чтобы не потерять большую часть наших 
посетителей. 


Современное использование С$$3 


Спецификация С$$3 — это неоспоримое будущее в области декоративного оформ- 
ления веб-страниц, и ее разработка еще далека от завершения. Большинство моду- 
лей все еще продолжает совершенствоваться и модифицироваться, и ни один брау- 
зер не поддерживает все модули. Это означает, что С$53 испытывает такие же 
сложности, как и НТМІ5. Веб-разработчикам нужно решать, какие возможности 
использовать, а какие игнорировать, а также каким образом заполнить зияющие 
пробелы в браузерной поддержке. 


Внедрять С553 в веб-сайт можно, по большому счету, используя три стратегии, ко- 
торые рассматриваются в следующих разделах. 


ПРИМЕЧАНИЕ 


Спецификация С553 не является частью спецификации НТМІ5. Эти два стандарта 
были разработаны отдельно друг от друга, разными людьми, работающими в разное 
время в различных местах. Но даже организация \\3ЗС призывает веб-разработчиков 
использовать НТМІ5 и С$$3 вместе, как часть одной новой волны современного веб- 
дизайна. Например, на странице этой организации для создания логотипов НТМЕ5 
(млм. м3 .ого/ВтИМодо) можно видеть, что МЗС призывает разработчиков рекламиро- 
вать С553 в ее логотипах НТМІ5. 


Стратегия 1: используйте то, что можно 


Логично использовать возможности с высоким уровнем поддержки на всех основ- 
ных браузерах. В качестве примера одной из таких возможностей можно назвать 
применение веб-шрифтов (см. разд. "Типография для Интернета" далее в этой 
главе). Используя шрифты правильного формата, эту функциональность можно за- 
ставить работать на таких старых браузерах, как Пфегте{ Ехр]огег 6. К сожалению, 
очень немногие возможности С$33 входят в эту категорию. Заворачивание текста 
работает практически на всех устройствах, а после доработки прозрачность можно 
заставить работать на старых браузерах. Но почти все иные возможности не будут 
работать на все еще популярных браузерах ПЕ 7 и ІЕ 8. 


ПРИМЕЧАНИЕ 


Если не оговаривается иное, рассматриваемые в этой главе возможности работают на 
последних версиях всех основных браузеров, включая Іпіегпеї Ехріогег 9. Но на более 
старых версиях ІЕ они не работают. 
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Стратегия 2: рассматривайте возможности С$$3 
как усовершенствования 


У фанатов С553 есть боевой клич: "Веб-сайты не должны выглядеть абсолютно 
одинаково на всех браузерах". (У них даже есть свой веб-сайт — №@р:// 
РоҰерѕіќеѕ$ҸееіТоВеЕхрегіепсейЕхасіуТһеѕЅатеЕуегуВгоуѕег.сот.) В этом 
они определенно правы. 


Идея в основе этой стратегии заключается в использовании С553 для тонкой дора- 
ботки страниц, причем эта доработка не повлияет на возможность просмотра ос- 
новного содержимого и форматирования страницы в менее способных браузерах. 
Одним из примеров такой тонкой настройки является свойство рогаег-гадіиоѕ, по- 
зволяющее скруглять углы рамок. Далее приводится пример указания этого свойст- 
ва в правиле таблицы стилей: 


Һеадег { 
раскагоџпа-соїіог: #7695ЕЕ; 
Богаег: ЕВ1п #336699 зо11а; 
раааіпд: 10рх; 
тагдіп: 10рх; 
Бехі-а1ідп: сепіег; 
рогаег-гааіиѕ: 25рх; 


} 


Браузеры, поддерживающие свойство ЪБогаег-гад1аз, будут использовать его, а 
старые браузеры — просто игнорировать его, оставляя углы рамок квадратными 
(рис. 8.1). 


Ном {пе Могіа Соиіа Епа 


Ном їће Могіа Сои!іа Епа 


Рис. 8.1. Іпіегпеї Ехр/огег 9 скругляет углы рамки верхнего колонтитула (вверху), а Іпіегпеї Ехріогег 8 
игнорирует свойства рогаег-гааіиѕ, но применяет остальные свойства таблицы стилей (внизу) 


Эта стратегия явно привлекательна, так она позволяет веб-дизайнерам манипули- 
ровать последними "игрушками" этой технологии. Но если слишком увлечься, она 
имеет и определенный недостаток. Несмотря на то, насколько хорошо веб-страница 
может выглядеть при просмотре в последней версии вашего любимого браузера, 
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запустив ее в одном из старых браузеров, которые используются значительной 
частью ваших посетителей, вы можете быть глубоко разочарованы ее намного ме- 
нее впечатляющим внешним видом. А ведь вы хотите, чтобы ваш веб-сайт произ- 
водил впечатление на всех, а не только на веб-фанатов, использующих лучшие 
браузеры. 

По этой причине следует подходить к применению некоторых усовершенствований 
($53 с определенной долей осторожности. Ограничьтесь использованием возмож- 
ностей, которые уже поддерживаются несколькими браузерами (и поддержка кото- 
рых, по крайней мере, обещается в ГЕ 10). И никогда не применяйте эти возможно- 
сти так, чтобы производимое вашим сайтом впечатление резко менялось при его 
просмотре в старых браузерах. 


ПРИМЕЧАНИЕ 


Что касается поддержки С$$3, Іпїіегпеї ЕхрІогег большой слабак в этой области. Су- 
ществует воинствующее меньшинство веб-дизайнеров, которые считают, что веб- 
дизайнеры должны игнорировать этот браузер и применять возможности С553 как 
только они начинают поддерживаться другими браузерами. А как иначе оказывать 
давление на Мсго$ой и стимулировать усовершенствование Интернета? Такой подход 
вполне уместен, если основная цель вашего веб-сайта политическая, заключающаяся 
в продвижении передовых веб-стандартов. В противном случае следует иметь в виду, 
что сбрасывание со счета большого сегмента сетевой общественности плохо отразит- 
ся на вас, т. к. человек все равно использует свой браузер (который вам может и не 
нравиться) для просмотра вашей работы. 


Стратегия 3: добавляйте резервные решения 
с помощью Модегпіг2г 


Использование частично поддерживаемой возможности С$53 — хорошая идея, ес- 
ли веб-сайт будет достойно выглядеть и без нее. Но иногда без этой возможности 
легко потерять важную часть дизайна своего веб-сайта, или же сайт может выгля- 
деть просто неприглядно. Рассмотрим, например, что случится, если использовать 
многоцветную рамку, поддерживаемую только в браузере Еігеѓох (рис. 8.2). 


09 #5 тиібсоіогеа Богаег оп Еігеѓох. 


ВиЕ 15 поЕ 50 пісе оп Сһготе. 


Рис. 8.2. Многоцветная рамка выглядит приятно в Еігеїох (вверху). Но в Сһготе эти настройки 
отображаются как толстая одноцветная рамка (внизу), что не имеет никакой привлекательности 


Иногда эту проблему можно решить, установив несколько СВОЙСТВ В правильном 
порядке. Здесь базовым методом будет установка сначала общих СВОЙСТВ, а за ними 
новых, которые замещают предыдущие свойства. Когда этот подход работает, ОН 
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удовлетворяет все браузеры — старые браузеры используют стандартные настрой- 
ки, в то время как новые браузеры замещают эти настройки новыми. Далее показан 
пример применения этого метода для замены обычного фона градиентным: 


.ѕіу1іѕһВох { 


раскагоџпа: уе11ом; 


раскагоџпа: гааіа1-аогаадіепі (е11ірѕе, геа, уе11ои); 
} 


Результаты применения этого правила показаны на рис. 8.3. 


Рис. 8.3. Вверху: браузеры, которые 
не понимают С$$3, используют 
первую часть правила $+у11$ПВох 
и окрашивают фон сплошным желтым 
цветом. Внизу: браузеры, которые 
понимают С$$3, используют вторую 
часть правила и заполняют фон 
радиальным градиентом 


В некоторых случаях замещение свойств стиля не работает, т. к. устанавливаются 
комбинированные свойства. Примером комбинированного свойства является мно- 
гоцветная рамка на рис. 8.2. Эффект многоцветности устанавливается свойством 
Богдех-со1огз, НО ПОЯВЛЯЕТСЯ ТОЛЬКО если установлена большая толщина рамки по- 
средством свойства рогаег-+һіскпезѕ. В браузерах, которые не поддерживают мно- 
гоцветные рамки, толстая рамка одного цвета режет глаза независимо от цвета. 


Одним из способов решения подобных проблем будет использование библиотеки 
Јауа$сгірі Модегитг, которая проверяет поддержку возможностей НТМГ. конкрет- 
ным браузером (см. разд. "Определение возможностей с помощью Мойетігт" гла- 
вы 1). С помощью этой библиотеки можно определить альтернативные настройки 


! По крайней мере, таков план. Этот пример работает не совсем так, как описано здесь, т. к. стандарт 
радиального градиента все еще находится в процессе пересмотра и исправлений. Чтобы получить 
описанный здесь результат, нужно использовать префиксы разработчиков браузеров, как описано 
в разд. "Стили, специфичные для конкретных браузеров" далее в этой главе. 
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стилей для браузеров, не поддерживающих свойства стилей, которые вы хотите 
использовать в первую очередь. Допустим, что нам нужно создать две версии рам- 
ки для верхнего колонтитула (см. рис. 8.1). Мы хотим использовать скругленные 
углы в браузерах, которые поддерживают эту возможность, и двойную рамку в 
браузерах, которые эту возможность не поддерживают. Добавив в разметку стра- 
ницы ссылку на сценарий Мойегпілг, можно использовать следующую комбинацию 
правил таблицы стилей: 


/* Настройки для всех браузеров, независимо от уровня поддержки С553 */ 


Һеааег { 
Баскагоипа-со1от: #7695ЕЕ; 
раааіпд: 10рх; 
пагдіп: 10рх; 


Бехі-а1ідп: сепіег; 


/* Настройки для браузеров, которые поддерживают 
свойство рогаег-гадіцѕ. */ 
.рогаеггааіџѕ Һеадег { 
Богаег: ©һіп #336699 зо11а; 
рогаег-гааіоѕ: 25рх; 


/* Настройки для браузеров, которые не поддерживают 
свойство рогаег-гадіцѕ. */ 
.по-рогаеггааіцѕ һеадег { 
рогаег: 5рх #336699 доџЫ1е; 
} 


Этот набор правил работает следующим образом. В корневой элемент <ћет1> стра- 
ницы вставляется атрибут с1азз="по-) 3". 


<] с1аз$="по-)3"> 


Когда загружается Мойегпілг, этот сценарий выполняет быструю проверку на под- 
держку данным браузером ряда возможностей НТМГ5, ЈауаЅсгірі и С$33. По ре- 
зультатам проверки сценарий вставляет в корневой элемент <вт1> страницы целую 
кучу классов, разделенный пробелами: 


<һімі с1азз=")з Е1Лехрох сапуаз сапуаѕёехі мера1 по-іоиџсһ део1іосабіоп 
розбмеззаае по-мерза]АЧафаразе іпаехеаар һаѕһсһапде һіѕёогу ахадапаагор 
по-мерѕоскеёѕ гора һѕ1іа ти1іір1Іердѕ раскагоџпаѕіле рогаегітаде рогаеггаЯ1яаз$ 
рохзраЧом бехізһадом орасііу по-сззапіютаїіопѕ сѕзсоішопѕ сззадгадіепіѕ 
по-сззгеЁ1есііопѕ сѕѕігапѕЁогтѕ по-сз$6гапзЕогиз3А сззігапѕіёіопѕ Ёопёғасе 
депегаёеадсопіепі уійео аџаіо Іоса1ѕіогаде зезѕзіопзіогаде мериогкегѕ 
арріісаёіопсасһе зуд іпІіпеѕуд зи11 зѕудсІіірраіћѕ"> 


Наличие в этом списке класса без префикса по- означает, что данный браузер под- 
держивает соответствующую возможность. Если же класс указан с префиксом 
по-, соответствующая возможность в данном браузере не поддерживается. Таким 
образом, в данном примере ЛауаЗспрЕ поддерживается (3 ѕ), но веб-сокеты не под- 
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держиваются (по-иерѕоскеёѕ). Из возможностей С553 поддерживается свойство 
рогаег-гадіџѕ (рогдеггайіцѕ), НО СВОЙСТВО геғ1есііопѕ не поддерживается (по- 


сззке Лес 1опэ). 


Эти классы можно вставить в селекторы таблицы стилей, чтобы отфильтровать на- 
стройки стилей в зависимости от предоставляемой поддержки. Например, если 
данный браузер поддерживает свойство рогадег-гадіоѕ, селектор „Богдехггаялав 
Һеадег получит все элементы <һеадег> внутри корневого элемента <һєт1>. В про- 
тивном случае класс .рогаеггааіџоѕ будет отсутствовать, селектор ни с чем не сов- 
падает, и правило не применится. 


Но здесь есть своя загвоздка, заключающаяся в том, что Мойегпіхг предоставляет 
классы только для определенного подмножества всех возможностей С553. В это 
подмножество входят некоторые наиболее популярные и развитые возможности 
(553, но немногоцветные рамки (см. рис. 8.2), т. к. эта возможность поддерживает- 
ся только браузером Етеюх. По этой причине лучше воздержаться от использова- 
ния многоцветных рамок в своих разработках, по крайней мере на данном этапе. 


ПРИМЕЧАНИЕ 


С помощью Моаегпігг можно также создавать резервные решения на Јауа$сгірі. 
В данном случае нужно просто проверить значение соответствующего свойства объ- 
екта Модегпігг, как при проверке на поддержку возможностей НТМЕ5. Этот метод 
можно использовать, чтобы компенсировать отсутствие более продвинутых возмож- 
ностей С$$3, таких как переходы или анимации. Но для этого требуется так много 
усилий и настолько разные модели, что для необходимых возможностей веб-сайта 
обычно лучше всего придерживаться решений только на основе Јама$сгірі. 


Стили, специфичные для конкретных браузеров 


При разработке новых возможностей С$5 часто приходится сталкиваться с дилем- 
мой курицы и яйца. Для того чтобы усовершенствовать возможности, разработчи- 
кам нужно иметь отзывы и замечания об этих возможностях от разработчиков 
браузеров и веб-дизайнеров. Но чтобы разработчики браузеров и веб-дизайнеры 
могли предоставить такие отзывы и замечания, им нужно реализовать эти новые и 
несовершенные возможности. Это порождает цикл тестирований и предоставления 
отзывов по результатам тестирований, в результате которого многие усовершенст- 
вования принимают законченную форму. Но в процессе этого цикла синтаксис и 
реализация возможностей меняются. Такая ситуация порождает конкретную опас- 
ность применения какой-либо новой впечатляющей возможности неосведомлен- 
ными веб-разработчиками, не осознающими, что будущие версии стандарта могут 
изменить правила, вследствие чего эта возможность больше не будет работать на 
веб-сайтах. 


Чтобы предотвратить такое развитие событий, разработчики браузеров используют 
систему префиксов разработчиков (уеп4ог ргейхеѕ), чтобы изменять названия 
свойств и функций С$$5, пока они еще находятся в процессе разработки. Возьмем, 
например, новое свойство радиального градиента (см. разд. "Градиенты" далее 
в этой главе). Чтобы использовать его в браузере ЕтеЮх, нужно установить разра- 
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боточную версию этого свойства, которое называется -пог2-гадіа1-огадіепї. Пре- 
фикс разработчика -пог- (сокращение от Мох Ша — организации, занимающейся 
проектом Етеох) обозначает свойство для браузера Еігеѓох. 


Для каждого браузера существует собственный префикс разработчика (табл. 8.1). 


Таблица 8.1. Префиксы разработчиков браузеров 


Префикс Браузер 


-по2- Еігеѓох 


-меркіё- Сһготе и Заїагі (в обоих браузерах используется один и тот же движок 
визуализации) 


Іпіегпеї Ехріогег 


Орега 


Хотя префиксы разработчиков браузеров невероятно усложняют жизнь веб- 
разработчиков, для их использования есть хорошее основание. Разные разработчи- 
ки браузеров добавляют поддержку возможностей в различное время, при этом 
часто используя разные предварительные версии одной и той же спецификации. 
Хотя все браузеры будут поддерживать одинаковый синтаксис для конечной вер- 
сии, синтаксис свойств и функций, специфичных для конкретных разработчиков, 
часто бывает разным. 


Поэтому, если вы хотите использовать в своем веб-сайте радиальный градиент уже 
сегодня, для того чтобы он правильно отображался во всех браузерах (включая гря- 
дущий Іпіегпеѓ ЕхрІогег 10), вам нужно использовать раздутое правило С$5 наподо- 
бие следующего: 


.ѕіу1ізһВох { 
раскагоџпа: уе11ом; 
раскагоџпа-імасде: -по2-гадйіа1-дгадіепі (сігс1Іе, дгееп, уе11ом); 
раскагоџпа-іюмаде: -меркіі-гааіа1-дгааіепі (сігс1Іе, дгееп, уе11ом); 
раскагоџпа-іюмаде: -о-гааіа1-дгадіепі (сігс1Іе, дгееп, уе11ои); 
раскагоџпа-іюмаде: -ютѕ-гааіа1-дгадіепі (сігс1е, агееп, уе11ои) ; 


} 


В данном примере правило радиального градиента для каждого браузера построено 
с применением одинакового синтаксиса. Это указывает на то, что стандарт входит 
в стадию принятия окончательной формы, и разработчики браузеров вскоре смогут 
отбросить префиксы разработчиков и поддерживать свойство гадіа1-дгадіепё на- 
прямую, как это уже делается сейчас для свойства согпег-гайіоѕ. Но синтаксис для 
данного свойства стал единообразным для разных браузеров сравнительно недавно, 
т. к. для старых версий Сһготе использовался совершенно другой синтаксис. 


ПРИМЕЧАНИЕ 


Использование префиксов разработчиков браузеров — сложное и трудное занятие. 
Веб-разработчики разделились во мнении, являются ли эти префиксы необходимым 
злом для получения самых последних и лучших возможностей или же большим пре- 


286 Часть 11. Создание современных веб-страниц 


дупреждением для рассудительных разработчиков не связываться с ними. Но можно 
быть уверенным в одном: если не использовать префиксы разработчиков, значитель- 
ная часть возможностей С$$3 в данное время будет недоступна. 


Типография для Интернета 


Среди всех новых захватывающих возможностей С553 трудно выбрать наилучшее. 
Но если бы пришлось выбирать только одну возможность, которая открывает дверь 
для лавины новых перспектив и которую можно использовать прямо сейчас, такой 
возможностью вполне могут быть веб-шрифты. 


В прошлом веб-дизайнерам приходилось работать с ограниченным набором шриф- 
тов, пригодных для веб-страниц. Под пригодными подразумеваются шрифты, 
о которых заведомо известно, что они работают на разных браузерах и в разных 
операционных системах. Но, как известно любому более-менее способному веб- 
дизайнеру, шрифты играют огромную роль в создании общего впечатления о доку- 
менте. В зависимости от используемого шрифта, одно и то же содержимое может 
восприниматься как строго профессиональное, причудливое, старомодное или 
сверхсовременное. 


ПРИМЕЧАНИЕ 


Разработчики браузеров не спешат реализовывать специальные веб-шрифты по объ- 
ективным причинам. Прежде всего, это вопросы оптимизации, т. к. разрешение экра- 
нов намного хуже разрешения печатных документов. Если веб-шрифт не настроить 
должным образом для отображения на экране монитора, буквы маленького размера 
будут сливаться в одну расплывчатую линию. Кроме этого, в большинстве шрифты 
платные. Крупные компании, наподобие МісгоѕоЁ, не горели желанием (что вполне 
понимаемо) добавлять функциональность, которая могла бы потакать загрузке веб- 
разработчиками установленных на компьютере шрифтов на веб-сайт без должного на 
то разрешения. Как мы увидим в следующем разделе, разработчики шрифтов нашли 
хорошие решения для каждой проблемы. 


В С$5$3 поддержка сложных шрифтов обеспечивается посредством возможности 
@Еопе-Еасе, которая применяется следующим образом: 


1. Требуемый шрифт (или, более вероятно, несколько версий шрифта для под- 
держки разных браузеров) загружается на сайт. 


2. Каждый шрифт регистрируется в таблице стилей с помощью команды ёѓопё- 
Ғасе. 


3. Зарегистрированный шрифт используется в правилах стиля указанием его на- 
звания, точно так же, как и обычные веб-шрифты. 


4. Когда браузер обнаруживает таблицу стилей, в которой используется специаль- 
ный веб-шрифт, он загружает этот шрифт с сервера в свой кэш для временного 
хранения страниц и изображений. После этого браузер использует этот шрифт 
только для данной страницы или сайта (рис. 8.4). Если этот же шрифт указыва- 
ется в другой странице, он должен быть зарегистрирован на этой странице и 
загружен на ее сервер, откуда он может быть загружен браузером в свой кэш. 


В последующих разделах мы рассмотрим эти шаги более подробно. 
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Сего & 26го 15 Ітрасі Габе! Веуегзеа Ведиаг 


_ Аросаурзе Мои А Ф} 


С О пелу/с/НТМІ5/Сһартег%2008/ҒотТеѕ/АросаіурѕеРаде Кеміѕед.һіті 


Кіснт мом. џоџ'те робауТееторге у ооо Аћегай Мет ће деуеіорей 
уогіа іѕ согпіогіабіе-ргобаЫбіу тоге согтѓожќабіе {Вап "$ реепѓогїће ауегаде 
Витап беіпа {Нгоцадбоц аНо{гесогдед В!<фогу. 


Виёдоп'+деііоо зтид. Теге'ѕ М! репу о! 


БогИЯс ммацз И сои! а! іг араќ 1415 агісіе, 
уоц'Шеагт абоиіаѓем оїоигѓауогіїеѕ. 


Ѕкерііс= ѕиодеєііћаїіһе Мацап са!епдаг=итр!у 
го!|< $0 а пеми 5,126-цеагегааНег2012, апа 
доезп'асфиаНиу рге ефа Ме-епдтд 

аросаіџрѕе Ви омеп а \ве Іопо-деай 
Мацапє меге лтопо аБоц{ и оаИу емеп пд 
еієе, ину зПоц!9 меги Нет оп 57 


М№оіаийе аз 19Мептдаза Уатрие ТаКеомегог Иутд-Оеад ТаКеомег, а гоБо& 
тебе! оп! = а аще па іҺоџдһі.Меаге аігеабиоишіпитбегедбцоиг 
1есппо!ооса!да99е{5, апдемеп В баїеѕ їеагѕїћесаџ һѕ Јарапеѕегобоїѕ!аче 
іште һіп оуегБу {Ве апкіе< апа азК$ (па ѕиіќабіу гобойс моісе) "\Мпо'$ уоиг 


Мй уоц ће һе і25і регсоп ѕѓатоїту 
й опоо? іһоѕє аросаурис 
эсетагиоз рівуѕ ои? 


Яза ном?" 


Ітрасї Габе! Ведиаг 
Меїгорћобіа 


Рис. 8.4. В этой обновленной странице апокалипсиса используется набор 
из четырех разных шрифтов. Все эти шрифты бесплатные. Как загрузить их, 
объясняется в разд. "Наборы шрифтов" далее в этой главе 


ПРИМЕЧАНИЕ 
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Технически возможность @ Ғопі- Ғасе не является новой. Она была частью специфи- 
кации С$$ 2, но не вошла в С$$ 2.1, когда разработчики браузеров не смогли догово- 
риться о сотрудничестве. Теперь в спецификации С$$3 предпринимаются новые уси- 
лия для того, чтобы сделать возможность ё опе - Ғасе универсальным стандартом. 


Форматы веб-шрифтов 


Хотя все современные браузеры поддерживают возможность ёғопі-ғасе, не все они 
поддерживают одинаковые типы файлов шрифтов. Например, Іњіегпеѓ ЕхріІогег, ко- 
торый обеспечивает использование @Еопе-Еасе в течение многих лет, поддерживает 
только файлы типа ЕОТ (ЕтБедаеа ОрепТуре, внедряемый ОрепТуре). Этот фор- 
мат предоставляет ряд преимуществ, например, в нем используется сжатие для 
уменьшения объема файла шрифтов, а также применяется строгое лицензирование 
для веб-сайтов, чтобы шрифт нельзя было украсть с одного сайта и использовать на 
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другом. Но формат ЕОТ никогда ни пользовался большой популярностью и не ис- 
пользуется никакими другими браузерами. Вместо него браузеры работают с более 
знакомыми стандартами шрифтов, применяемыми в компьютерных приложени- 
ях — ТТЕ (ТгоеТуре) и ОТЕ (ОрепТуре Роз спр®. Кроме этого, существуют еще 
два типа отображения шрифтов — ЗУС и \ОЕЕ. В табл. 8.2 дано краткое описание 


всех этих форматов шрифтов. 


ТТЕ (ТгиеТуре), 
ОТЕ (ОрепТуре 
Роѕібсгірі) 


Таблица 8.2. Форматы внедряемых шрифтов 


Описание 


Распространенные форматы 
шрифтов настольных компьюте- 
ров 


Используется в 


Ғігеѓох (до версии 3.6), Сһготе 
(до версии 6), Ѕаѓагі и Орега 


ЕОТ (Етреаадеа 
ОрепТуре) 


Формат, специфичный для про- 
дуктов корпорации Мгсгозой. Не 
завоевал популярности у браузе- 
ров, за исключением Іпќегпеї 
Ехріогег 


Іпќегпеї Ехріогег (до версии ІЕ 9) 


$\@ (ЗсааЫе Месїог 
агарћісѕ) 


Универсальный графический 
формат, который можно исполь- 
зовать для создания шрифтов. 
Дает хорошие, но не отличные 
результаты — медленно отобра- 
жается и демонстрирует текст 
пониженного качества 


Заѓагі Мобііе (на іІРһопе и іРаа до 
10$ 4.2) и мобильные устройства 
под управлением операционной 
системы Апагоіа 


М/ОЕЕ 
(Мер Ореп 
Рог" Рогтаї) 


Возможно, единый формат 
шрифтов будущего. Поддержи- 
вается новыми версиями браузе- 


Любой поддерживающий брау- 
зер, начиная с Іпіегпеі Ехр/огег 9, 
Еігеѓох 3.6 и Сһготе 6 


ров 


В итоге можно сказать следующее: если вы хотите использовать возможность 
@РопЕ-Еасе и поддерживать широкий диапазон браузеров, вам нужно предоставлять 
ваш шрифт в нескольких разных форматах. Как минимум, шрифт нужно предоста- 
вить в формате ТТЕ или ОТЕ (без разницы), ЕОТ и $УС. Хорошо (но не обязатель- 
но) также предоставить шрифт в перспективном формате \!ОЕЕ, может стать более 
популярным и лучше поддерживаемым в будущем. (Одним из достоинств этого 
формата является использование сжатых файлов, что сокращает время их загрузки.) 


АВАРИЙНАЯ СИТУАЦИЯ 
Устранение проблем 
Даже если вы последуете всем приведенным ранее правилам и предоставите все 


требуемые форматы шрифтов, ожидайте некоторые загвоздки. В частности, с веб- 
шрифтами иногда возникают следующие проблемы. 


® Многие шрифты выглядят плохо в все еще пользующейся популярностью опера- 
ционной системе М/іпаомѕ ХР, т. к. в настройках многих компьютеров с этой опера- 
ционной системой отключено сглаживание (ап#-айазтоа). (А без применения сгла- 
живания шрифты выглядят очень непривлекательно.) 


• От пользователей поступали жалобы о проблемах с печатью определенных вне- 
дренных шрифтов из некоторых браузеров или в операционных системах. 
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® Некоторые браузеры страдают проблемой РОЧТ (Назп о? ОпѕѓуІеа Тех, вспышка 
нестилизованного текста). Это явление происходит, когда внедренный шрифт не 
успевает загрузиться вовремя, и страница отображается сначала в резервном 
шрифте, а потом воспроизводится повторно на встроенном шрифте. Эта проблема 
особенно заметна в старых версиях браузера Еігеїох. Если вас это сильно беспо- 
коит, можете воспользоваться библиотекой Јама$сгірїі от Соодіе, позволяющей 
разработчику определить резервные стили, которые используются вместо неза- 
груженных внедренных шрифтов, таким образом, предоставляя ему полный кон- 
троль над воспроизведением текста в любое время. См. Һ№ір://соде.доодіе.сот/ 
аріѕлмерѓопіѕ/аосѕ/№мерѓопі Іоааег.ћіті. 


Хотя эти небольшие проблемы иногда и возникают, большинство из них постепенно 
решается с выпуском новых версий браузеров. Например, браузер Еігеѓох теперь сво- 
дит эффект ГОЧТ к минимуму, ожидая до трех секунд, пока не загрузится внедренный 
шрифт, прежде чем использовать резервный шрифт. 


Наборы шрифтов 


Вы, наверное, уже задаетесь вопросом, где можно взять разные файлы шрифтов, 
которые могут вам потребоваться? Легче всего будет загрузить готовый набор 
шрифтов из Интернета, получив, таким образом, все требуемые файлы шрифтов. 
Недостаток этого подхода состоит в том, что ваш выбор ограничивается тем, что вы 
сможете найти в глобальной сети. Чтобы помочь вам в поиске наборов веб- 
шрифтов, можно порекомендовать воспользоваться одним из лучших сайтов шриф- 
тов — Еопі Заиите (ууу.Ёопёѕдиігге.сот/опќѓасе). На рис. 8.5 показано несколь- 
ко шрифтов из предоставляемых на этом сайте наборов. 


Набор шрифтов загрузится в виде файла, сжатого в формате 21Р, который содержит 
несколько файлов. Например, архив набора шрифтов Сһапѓе! Апӯаџа, показанный 
на рис. 8.5, содержит следующие файлы: 


Вегпа Мопёад Т1сепзе. хе 
Сһапбе11і Апёідџа-мерѓҒопё.еоё 
Сһапёе11і Апіідџа-мерѓҒопі. зуд 
Сһапбе11і Апёідџа-мерҒопё.ібғ 
Сһапёе11і Апіідџа-мерѓҒопі.моЁЁ 
аето . Һет 

зіуІезһееї.сѕѕ 


Текстовый файл (Вегпа Мопс Ілсепѕе.іхі) содержит информацию об условиях ли- 
цензирования, которая, по большому счету говорит, что данный шрифт можно ис- 
пользовать бесплатно для любых целей, но нельзя продавать. Следующие четыре 
файла набора СһапіеёПі АпНаиа содержат разные форматы данного шрифта. 
(В зависимости от выбранного вами шрифта, архив может содержать дополнитель- 
ные файлы для разных версий этого шрифта, например курсив, полужирный или 
жирный.) Наконец, файл дето.Вит содержит образец страницы с использованием 
этого шрифта, а файл ѕѓуІеѕһееѓ.сѕѕ — правило таблицы стилей для применения 
шрифта в веб-странице. 


Чтобы использовать шрифт СрапеШ АпНаца в своей веб-странице, файлы разных 
форматов шрифта нужно загрузить на веб-сервер в папку этой веб-страницы. После 
этого шрифт нужно зарегистрировать, чтобы он был доступным для использования 
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в таблице стилей. Регистрация выполняется с помощью сложного правила ёғопі- 
Ғасе в начале таблицы стилей, которое выглядит следующим образом (строки про- 
нумерованы единственно с целью облегчения идентификации отдельных строк при 
рассмотрении их назначения): 


І @РопЕ-Еасе { 

2 Ғопі-Ғамі1у: 'Сһапіе111іАпііаџоаКеди1іаг!'; 
гс: игі ('Сһапбе11і Апёіаџа-мерҒЁопі.еоё!'); 

Іоса1 ("Сһапёе111і Апёіаџа'), 

иг] ('Сһапёе11і Апііаџа-мерЁопё.моЁ#') Ғогтаї ('моЁЁ'), 
иг] ('Сһапёе11і Апііаџа-мерҒопё.ЕёҒ') Ғогтаї ('Егџебуре'), 


иг ('Сһапёе11і Апііаџа-мерЁопё.ѕуд') Ғогтаї ('5уд'); 


5гС: 


о ман 


} 
Строки приведенного кода выполняют следующие функции. 


О Строка 1: выражение ёғопё-ғасе регистрирует шрифт для его дальнейшего 
применения в таблице стилей. 


Категория шрифта 


Ғопт заийта | Оомтіога Нипагед$ о? Ргее @опї-ѓасе Ғопї - Мога Агеох — 


Ле за Мем Нізсгу Всоктаҝѕ Тооб Нер 
е 


{> Ғопі 5диігге! | Оомпісай Нипагесіз о... | = - 


№ Һир: опізаціта,сот/опНасе 


2опёз | 1 Рог! 
Мем Роге | Мам @Н Оето | Сеё КИ 


Заца 4.8669 


Санюгарис 


Сһалейіі Апёдиз | 1 Рот 
Міем Роге | Мел В Оелто | Сеё КИ 


Спапей Апйаиа 


‘боёис Ойга ОТ | 1 Рог" 
Мем Роге | Мігм @# Оетю | бе Ки 


Сие Ца ОТ Аа 


Кіпофћіпос Ехобог | 1 Рог! 
Міем Роге | Міс @Я Оето | Сеё КИ 


Ғіогалќе аё аига | 2 2огё> 
Міст Рег | Мне @Н Јето | Се КА 


Иотгапй}е а} 1. 


Кез 50 | 1 Ғопі 
Уем Рог! | Мем @Н Јето | бе КА 


кеПѕ 50 абсосЕ 


Кіпаёіта= Ғіоџгісћез | 1 Богі 
Уем спі | Мом @Н Јето | боі К 


Кіпдһіпдѕ Ехоќог Аа 27 эхее 


Сопаоіа 50 | 2 Ролі 
Мем Роге | Ме @Я Оете | Сеё КИ 


Согъоіа 5) АВЫ 


Кіпсћітпдѕ СаШюгармса | 3 оп 
Мем Роге | Міем @Я Оето | СеЁ КИ 


Кіпдёітаѕ Са[Натар са 


Кіпсћітас Рошпа=воп | 1 Рог 
Мем Рога | Міем @# Осто | Соё КИ 


Коди чапда 


Ссылки для просмотра и загрузки шрифта 


Рис. 8.5. Сайт Роп Ѕдиігге! предоставляет для загрузки несколько сотен высококачественных шрифтов, 
организованных в разделы по категориям (такие как, например, СаШагарыс, Сгипде или Веіго). 
Но самое приятное, что все эти шрифты бесплатные для любого использования, будь то 
на персональном компьютере для создания документов или на веб-странице в Интернете. 
Чтобы получше рассмотреть понравившийся шрифт, щелкните по ссылке Міем Роп{; чтобы увидеть, как 
выглядит текст в этом шрифте на веб-странице — по ссылке Міем @Н Оето; а чтобы загрузить его 
на свой компьютер — @е Ки 


и 


и 
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Строка 2: шрифту можно присвоить любое название. Это название будет упот- 
реблено позже, при использовании шрифта. 


Строка 3: первым должен быть указан формат ЕОТ, т. к. дальнейшая часть пра- 
вила сбивает с толку Пиегпе{ Ехрогег, и тот не обращает внимания на остальные 
форматы. Функция таблицы стилей ог1() указывает браузеру загрузить файл из 
обозначенного ОКІ. Если шрифт размещен в одной папке с веб-страницей, то 
здесь можно просто указать название файла. 


Строка 4: функция 1оса1() указывает браузеру название шрифта, и если этот 
шрифт установлен на компьютере посетителя веб-странцы, браузер использует 
локальный шрифт. Но в редких случаях это может вызвать проблемы. Напри- 
мер, в зависимости от того, где установлен шрифт на компьютере посетителя, 
компьютеры Мас с ОЗ Х могут вывести предупреждение о нарушении безопас- 
ности, или же может загрузиться другой шрифт с таким же названием, как и 
ваш. По этой причине веб-разработчики иногда указывают явно несуществую- 
щее имя файла, чтобы браузер не нашел локального шрифта. В качестве просто- 
го имени такого типа можно использовать какой-либо бессмысленный символ 
наподобие 1оса1('©'). 


Строки 5—7: последний шаг — это сообщить браузеру о других файлах шриф- 
тов, которые он может использовать. Если имеется файл шрифта типа \!ОЕЕ, 
укажите этот файл первым, т.к. данный формат предоставляет наилучшее 
качество шрифта. Следующим укажите файл шрифта формата ТТЕ или ОТЕ, а 
самым последним — файл формата ЗУС. 


СОВЕТ 


Конечно же, вводить правило @ГопЕ-Гасе от руки нет надобности, как и понимать все 
технические подробности, описанные выше. Можно просто скопировать это правило 
из файла ѕіуІеѕћееї.сѕѕ, который входит в состав архива веб-шрифтов. 


Зарегистрировав веб-шрифт с помощью функции ёғопё-ғасе, вы можете использо- 
вать его в любой таблице стилей. Для этого используется уже знакомое нам свойст- 
ВО Ғопі-Ғапі1у, которому присваивается значение в виде названия семейства шриф- 
тов, зарегистрированного с помощью функции ёғопе-ғасе (в строке 2). Далее при- 
веден пример регистрации веб-шрифта (без подробностей) и последующего 
использования этого шрифта в правиле таблицы стилей: 


@Ғопё-Ғасе { 


Ғопі-Ғаті1у: 'Сһапёе111іАпііаџоаКеди1іаг!'; 


роау { 


} 


Ғопі-Ғаті1у: 'Сһапёе111іАпііаџоаКеди1іаг'; 


Это правило применяет веб-шрифт ко всей странице, хотя область его применения, 
конечно же, можно было бы ограничить определенными элементами или приме- 
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нить классы. Но шрифт нужно в обязательном порядке зарегистрировать до того, 
как использовать его в правиле таблицы стилей. Если выполнить эти шаги в обрат- 
ном порядке, шрифт не будет работать должным образом. 


СОВЕТ 


Кроме пакетов шрифтов, веб-сайт Роп{ Здийте! также предоставляет другие шрифты. 
Дополнительные шрифты можно найти в списке наиболее популярных шрифтов (от- 
крывается щелчком по ссылке Рорщаг) или в списке недавно добавленных шрифтов 
(открывается щелчком по ссылке Весепі). Эти списки содержат наборы веб-шрифтов, 
а также другие файлы бесплатных шрифтов, для которых нет вспомогательных фай- 
лов или которые нужно загрузить с другого веб-сайта. Если выбранный вами шрифт 
имеет только один формат, его можно преобразовать в другие форматы с помощью 
генератора шрифтов, предоставляемого сайтом Гоп Заийте! (см. разд. "Использо- 
вание своих шрифтов" далее в этой главе). 


ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Использование шрифта на локальном компьютере 


Можно ли мне использовать один и тот же шрифт для веб-страниц 

и для распечатки документов? 

Если вы нашли хороший шрифт для своего веб-сайта, вы, скорее всего, можете также 
использовать его на своем компьютере, например, чтобы создать какой-либо броский 
логотип. Современные компьютеры с М/іпаомѕ и Мас О$ Х поддерживают шрифты 
ТгиеТуре (8) и ОрепТуре (ої). Все пакеты шрифтов на сайте Гопї Заийте! содержат 
шрифт в одном из этих форматов, обычно это формат ТгиеТуре. Чтобы установить 
этот шрифт в компьютере с \\Ипдомз, извлеките его из архива, а затем щелкните на 
файле шрифта правой кнопкой мыши и в открывшемся контекстном меню выберите 
команду Установить. (Таким способом можно одновременно установить несколько 
выбранных файлов шрифтов.) На компьютере с Мас ОЗ Х запустите утилиту Еопї 
Воск, а потом нажмите кнопку Установить шрифт. 


Веб-шрифты Соод!е 


Еще один источник бесплатных веб-шрифтов — это служба Сооз]е М№еБ Гоп. Ее 
особенность в том, что пользователю не нужно беспокоиться о форматах шрифтов, 
т. к. Чоое определяет браузер посетителя страницы и автоматически отправляет 
файл шрифта нужного формата. 


Чтобы использовать шрифт Ооо$е в своих страницах, выполните такую последо- 
вательность шагов: 


1. Откройте в браузере страницу у\\.соо е.сот/\е опт. Нажмите кнопку Ѕќагі 
сһооѕіпо Гоп (Начать выбор шрифтов). Откроется страница, содержащая длин- 
ный список имеющихся в наличии шрифтов (рис. 8.6). 


2. Выберите способ просмотра шрифтов, перейдя на одну из вкладок вверху стра- 
ницы — Мога (Слово), Ѕепќепсе (Предложение) или Рагасгарћ (Абзац). На- 
пример, если вы ищете шрифт для заголовка, вам, скорее всего, следует выбрать 
вкладку Мога или Зещепсе, чтобы посмотреть на шрифт в одном слове или 
предложении соответственно. Но если вам шрифт нужен для текста, то следует 
выбрать вкладку Рагаргарһ, чтобы просмотреть, как этот шрифт будет выгля- 
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деть в большом фрагменте текста. При любой выбранной опции просмотра 
можно ввести свой текст образца и установить желаемый размер шрифта. 


3. Настройте опции поиска. Если вы знаете название требуемого вам шрифта, вве- 
дите его в поле поиска. В противном случае нужно будет просматривать все 
шрифты, прокручивая страницу вверх, что для латинских шрифтов может занять 
значительное время. Чтобы ускорить поиск, можно отсортировать и отфильтро- 
вать список согласно определенным критериям, например, наиболее популярные 
жирные шрифты без засечек. Расположение элементов управления для установ- 
ки этих опций обозначены на рис. 8.6. 


Отсортируйте список 


2 соод меъ Рось 


© С О илмлмдоодіе сот 


Соое мер їопіѕз {А =: зыта см 
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Рис. 8.6. Соодіе обладает постоянно расширяющимся перечнем шрифтом. Процесс поиска подходящего 
шрифта можно облегчить, настроив опции сортировки и фильтрации списка шрифтов. Например, список 
можно отсортировать в алфавитном порядке или в порядке наибольшей популярности, а также наложить 
фильтр, чтобы список содержал только, например, шрифты с засечками, шрифты без засечек или 
курсивные шрифты 


4. Обнаружив подходящий шрифт, щелкните по ссылке Рор ооё. Откроется новое 
окно, содержащее описание шрифта и все его подробности. 


5. Если на этом этапе вы решите использовать данный шрифт, щелкните по ссылке 
ОшісК-иѕе на исходной странице. Откроется окно, содержащее код, требуемый 
для использования данного шрифта. Код состоит из ссылки на таблицу стилей, 
которую нужно вставить в разметку вашей веб-страницы, и примера правила 
таблицы стилей, применяющего шрифт. 
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6. Вставьте в свою веб-страницу ссылку на таблицу стилей. Например, если 
выбран шрифт Меїгорһобс, в блок <пеаа> вашей веб-страницы нужно вставить 
такую ссылку на таблицу стилей: 


<1іпк Һгеғ="Һібр:/ / Ғопіѕ.доосдІеаріѕ.сот/сѕѕ? Ғаті 1у=Меёгорһоріс" 
ге1="ѕіуІеѕһееі"> 


Данная таблица стилей регистрирует шрифт посредством функции ёғопе-ғасе, 
избавляя вас от необходимости выполнять эту работу самому. Но что лучше все- 
го, СоовІе предоставляет файлы шрифтов, что, опять же, избавляет вас от необ- 
ходимости загружать их на свой веб-сайт. 


ПРИМЕЧАНИЕ 


Следует помнить, что ссылку на таблицы стилей шрифтов Соодіе нужно расположить 
первой в списке ссылок на таблицы стилей. Это позволит другим вашим таблицам 
стилей использовать шрифт Соодіе. 


7. Используйте шрифт, обращаясь к нему по его названию, в любое время. Напри- 
мер, далее приводится правило для применения должным образом зарегистри- 
рованного (см. шаг 6) шрифта Меігорћоыс в заголовках первого уровня, предос- 
тавляющее резервный шрифт на случай, если браузер не сможет загрузить 
основной шрифт: 
һі | 

Ғопё-Ғаюмі1у: 'Меігорһоріс ', агіа1, зегі; 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
Создание коллекции шрифтов 


Изложенная ранее процедура указывает самый быстрый способ для создания размет- 
ки для требуемого кода. Но выбор шрифтов можно расширить, создав коллекцию 
шрифтов. 


Коллекция шрифтов — это способ создания пакета шрифтов. Чтобы создать коллек- 
цию шрифтов, нажмите кнопку Ада їо Соїесііоп справа от выбранного вами шрифта. 
По мере добавления шрифтов в коллекцию они отображаются в панели синего цвета 
в нижней части окна браузера. 


Выбрав все необходимые шрифты, нажмите кнопку Оѕе в этой панели. Откроется 
страница наподобие страницы Оиіск-иѕе для одного выбранного шрифта, с той раз- 
ницей, что она предоставляет информацию для создания ссылки на единую таблицу 
стилей, поддерживающую все шрифты из созданной вами коллекции шрифтов. 


При создании коллекции шрифтов можно также использовать две ссылки, размещен- 
ные в правом верхнем углу страницы. Ссылка Вооктагк уоиг СоПесНоп позволяет 
скопировать ссылку на вашу коллекцию шрифтов, которую можно добавить в закладки 
браузера с тем, чтобы можно было возвратиться и редактировать эту коллекцию в бу- 
дущем. А ссылка ромтіоаа уоиг СоПесНоп предоставляет возможность загрузить 
копии шрифтов на локальный компьютер, где их можно установить и использовать для 
создания и печати локальных документов. 
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Использование своих шрифтов 


Некоторые веб-разработчики предъявляют высокие требования к своим шрифтам. 
Если вы принадлежите к числу таких разработчиков и у вас особые требования к 
шрифту для своих веб-страниц, то даже самая обширная библиотека бесплатных 
шрифтов может не содержать необходимого вам шрифта. К счастью, существует 
легкий способ адаптировать любой шрифт для использования в веб-страницах. 
С помощью правильного инструмента имеющийся у вас файл шрифта формата ТТЕ 
или ОТЕ можно преобразовать в другие форматы — ЕОТ, ЗУС или МОЕЕ. 


Но прежде чем приступать к преобразованию, важно понимать следующее — 
обычные шрифты на вашем компьютере не являются бесплатными. Это означает, 
что без явного разрешения разработчика этого шрифта вы не можете просто взять 
шрифт со своего компьютера и использовать его на своем веб-сайте. Например, 
компании М1сгозой и АррІе покупают лицензии на определенные шрифты, которые 
они поставляют со своими операционными системами и приложениями, чтобы по- 
купатели этих продуктов могли, скажем, создать квартальный отчет в текстовом 
редакторе. Но лицензия не позволяет покупателям этих продуктов использовать эти 
шрифты на веб-страницах и загружать их на веб-серверы. 


СОВЕТ 


Единственный способ узнать, нужно ли покупать лицензию на определенный шрифт 
для его использования в веб-странице — это связаться с его разработчиком. Некото- 
рые разработчики шрифтов устанавливают стоимость своей лицензии на основе тра- 
фика, получаемого веб-сайтом. Другие могут позволить пользоваться своим шрифтом 
за номинальную плату или совсем бесплатно на определенных условиях (например, 
включения примечания мелким текстом о происхождении используемого шрифта или 
требования для некоммерческого сайта не предпринимать действий, направленных на 
зарабатывание больших сумм денег). Обращение к разработчику шрифта может так- 
же иметь положительный побочный эффект, т. к. умелые разработчики часто предос- 
тавляют версии своих шрифтов, оптимизированные для дисплеев. 


Получив разрешение на использование определенного шрифта, его можно преобра- 
зовать в требуемый формат с помощью удобного инструмента, предоставляемого 
сайтом Еопі Заийте! (того самого, который предоставляет бесплатные наборы веб- 
шрифтов). Для преобразования шрифта откройте страницу мммопбаийте].сот/ 
Ѓопѓасе/сепегаїог. Откроется окно, показанное на рис. 8.7. 


Первым делом нажмите кнопку Ааа Еоп (Добавить шрифты), чтобы загрузить 
файл шрифта со своего компьютера. Потом установите флажок Уез, һе ѓоріѕ Гт 
иріоайіпо аге ІесаПу еііоіЫе Гог ууеЬ етһедаіпо (Да, загружаемые мною шрифты 
отвечают юридическим требованиям для внедрения в веб-страницы, при условии, 
что эти шрифты отвечают лицензионным соглашениям), как описано в 
разд. "Использование своих шрифтов" ранее в этой главе. Наконец, нажмите кноп- 
ку Вомщоаа Үоиг КИ, чтобы сгенерировать набор веб-шрифтов и загрузить его на 
свой компьютер. 


Этот набор веб-шрифтов точно такой же, как и наборы веб-шрифтов, предостав- 
ляемые для загрузки с этого веб-сайта. Он даже содержит таблицу стилей с разде- 
ЛОМ ё#опі-ғасе, а также тестовую веб-страницу. 
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Рис. 8.7. Окно преобразователя шрифтов сайта Ғопі Заийте! 


СОВЕТ 


Все еще не можете найти подходящий шрифт? Тогда посмотрите веб-сайт ћір:// 
мебѓопіѕ.іпіо. На нем вы найдете ссылки на другие сайты, предоставляющие бес- 
платные шрифты, а также на профессиональные компании — разработчики шрифтов. 


Размещение текста в несколько колонок 


Инновации спецификации С$53 в области отображения текста не ограничиваются 
новыми шрифтовыми возможностями. В нее также был добавлен абсолютно новый 
модуль для размещения текста в несколько колонок, таким образом предоставляя 
разработчикам гибкое средство для решения проблемы длинного текста без потери 
его читаемости. Создание нескольких колонок текста не требует почти никаких 
усилий и может быть выполнено двумя способами. Первый подход — это устано- 
вить количество требуемых колонок с помощью свойства со1омп-соип®, как показа- 
но в следующем коде: 


агіісіе { 
техЕ-а119п: јиѕііҒу; 
соїџтп-соцпё: 3; 


} 


На момент написания этой книги данный метод был совместим только с браузера- 
ми Орега. Для браузеров Еігеѓох, Стоте и Зап это свойство используется с пре- 
фиксом разработчика браузера: 
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агіісіе { 
Бехі-а1ідп: јоѕііғу; 
-то2-соГатп-соиџпЁ: 3; 
-меркі+-со1оџтп-соопё: 3; 
соГотп-соипіЁ: 3; 


} 


Как обычно, браузер Іњќегпеѓ ЕхрІогег 9 не поддерживает эту возможность вообще, 
хотя, скорее всего, его следующая версия, ІЕ 10, такую поддержку будет предос- 
тавлять. 


Указание точного числа колонок лучше всего подходит для веб-страниц с ком- 
поновкой фиксированного размера. Но если размеры компоновки меняются в соот- 
ветствии с размерами окна браузера, ширина колонок может оказаться слиш- 
ком большой и текст в них будет трудно читать. Во избежание такой проблемы 
лучше не устанавливать точное число колонок, а дать указание браузеру, каким 
должен быть размер каждой колонки, используя свойство соі отп-міаєћ, как показа- 
но далее: 


агіісіе { 
Бехі-а1ідп: јоѕііғу; 
—по7-соТатп-мт ЕВ: 10ет; 


-меркіё-со1џтп-міаёһ: 10ет; 
со1отп-міаёћһ: 10ет; 


} 


Таким образом, браузер может создать такое количество колонок, которое необхо- 
димо для заполнения имеющегося пространства (рис. 8.8). 


ПРИМЕЧАНИЕ 


Размер колонок можно указывать в пикселах, но лучше использовать для этого 
ет-единицы', т. к. ет-единицы адаптируются к текущему размеру шрифта. Таким об- 
разом, если посетитель веб-страницы увеличит размер шрифта в браузере, ширина 
колонки возрастет пропорционально размеру шрифта. В пикселах одна ет-единица 
приблизительно вдвое больше размера шрифта. Например, для 12-пиксельного 
шрифта одна ет-единица будет равна 24 пикселам. 


Можно также настроить размер промежутка между колонками (свойство соїотп- 
дар) и даже вставить вертикальную разделительную линию между ними (свойство 
соїотп-го1е). Дополнительную информацию обо всех возможностях форматирова- 
ния колонок, включая способы управления разбиением текста между колонками и 
методы для перехода фигур и других элементов из одной колонки в другую, 
см. в полном стандарте по колонкам по адресу уүү.уү3.ого/ТК/сѕ53-тийсоІ. К со- 
жалению, на момент написания этих строк эти продвинутые возможности не под- 
держивались ни одним браузером. 


! Буква м как мера напечатанного на строке, странице (прежде за единицу измерения принималась 
площадь, занимаемая этой буквой). 
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Рис. 8.8. В узком окне браузера можно поместить только одну колонку текста (вверху), 
но в более широком окне количество колонок увеличивается (внизу) 


Адаптация к разным устройствам 


Если вы когда-либо работали в Интернете более-менее продолжительное время 
с мобильного устройства, то, несомненно, обнаружили, что крохотный экранчик 
(каким бы большим он не был для мобильного устройства) — не лучшее окно в 
Интернет. Конечно же, практически любую веб-страницу можно просмотреть, про- 
кручивая ее во всех направлениях и масштабируя ее туда и обратно. Но вряд ли та- 
кой процесс будет способствовать получению положительного восприятия этой 
страницы. Ситуация намного улучшается, если вы заходите на сайт, разработанный 
специально для мобильных устройств, размер содержимого которого масштабиру- 
ется под размеры экрана вашего устройства. 


В настоящее время создание разработчиком специальных версий одного и того же 
веб-сайта для конкретных устройств, таких как 1РВопе или 1Ра4, не будет чем-то 
необычным. Эти сайты, как правило, размещаются на других доменах, чем обычная 
версия сайта. Например, домен обычного сайта газеты "Мем Үогк Тітеѕ" — 
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Б@фр://ууууу.пуйте$.сот, а мобильного сайта — ВИр://гп.пуйте$.сот. Но с этим 
подходом есть своя закавыка: по мере того, как выход в Интернет с мобильных 
устройств становится все более популярным, а мобильные устройства становятся 
все более разнообразными, веб-разработчики могут оказаться в ситуации, где со- 
провождение всех этих сайтов под конкретные типы мобильных устройств может 
потребовать СЛИШКОМ больших УСИЛИЙ ИЛИ вообще не под силу. 


Опять же, создание отдельных версий сайта для каждого типа мобильного устрой- 
ства не является единственным способом решения проблемы разных мобильных 
устройств. Другой подход — разработать код веб-сервера, который исследует каж- 
дый запрос, вычисляет, какой браузер подал этот запрос, и отправляет содержимое 
соответствующего формата. Такое решение, безусловно, великолепно, но только 
если у вас есть время и необходимые навыки. Но было бы замечательно иметь про- 
стой механизм, который бы подстраивал стили вашей веб-страницы под разные ти- 
пы устройств, не требуя для этого ни инфраструктуры веб-приложения, ни сервер- 
ного кода. 


Представляем запросы о возможностях отображения (тейа диепез). Эта возмож- 
ность С553 предоставляет простой способ изменять стили веб-страницы для раз- 
ных устройств и разных настроек просмотра. Аккуратное использование таких за- 
просов может помочь вам предоставить свою веб-страницу любому устройству — 
от сверхширокого экрана домашнего компьютера до экрана смартфона 1РВопе. 
И все это без изменения ни единой строчки кода НТМГ. 


Запросы о возможностях отображения 


Принцип работы запросов о возможностях основан на получении ключевой ин- 
формации об устройстве, на котором просматривается веб-страница, такой как, на- 
пример, размер экрана, его разрешающая способность, возможности цветовоспро- 
изведения и т. п. На основе этих сведений можно применять разные стили форма- 
тирования или даже подключать совершенно другие таблицы стилей. Результаты 
работы запросов о возможностях показаны на рис. 8.9. 


УГОЛОК НОСТАЛЬГИИ 
Типы носителей С$$ 


Довольно интересно, создатели С3$ пытались решить проблему разных типов уст- 
ройств воспроизведения в С$$ 2.2 с помощью типов носителей (теаіа їуреѕ). Вы, 
возможно, уже пользуетесь этим стандартом, чтобы предоставлять разные таблицы 
стилей для вывода содержимого на разные устройства, как показано в следующем коде: 


<реаа> 


<!-- Используем эту таблицу стилей для отображения 
страницы на экране. --> 


<1іпк ге1="ѕіуІеѕһееі" тейіа="ѕсгееп" Һгеғ="зіуІеѕ.сѕѕ"> 


<1-- Используем эту таблицу стилей для распечатки страницы. --> 
<1іпк ге1="ѕіу1Іеѕзһееї" теаіа="ргіпё" ҺгеҒ="ргіпі зіу1Іеѕ.сѕѕ"> 
</Һеаа> 
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Рис. 8.9. Одна и та же страница, просматриваемая в широком и узком окне 


(вверху и внизу соответственно). Когда размер окна уменьшается, механизм запросов о возможностях 
автоматически заменяет часть правил таблицы стилей для страницы, превращая боковую панель 
в нижний колонтитул. Страницу даже не нужно обновлять 
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Атрибут пеа1а также принимает значение вапаве1а, предназначенное для мобильных 
устройств с экраном небольшого размера и низкоскоростным подключением. Боль- 
шинство мобильных устройств пытаются обращать внимание на атрибут тедіа и ис- 
пользовать таблицу стилей папавела, если такая имеется. Но этот подход изобилует 
разными огрехами, и возможности атрибута тедіа весьма ограничены для работы 
с широким диапазоном устройств, подключенных к Интернету в настоящее время. 


При использовании запросов о возможностях первое, что необходимо сделать, — 
это выбрать свойство, которое нужно исследовать. На рис. 8.9 ключевой информа- 
цией является свойство пах-міаєћһ, которое получает текущий размер страницы в 
окне браузера. Еще более полезным будет свойство тах-деуісе-кіаєћ, которое про- 
веряет максимальную ширину экрана. Если это значение небольшое, очевидно, что 
мы имеем дело со смартфоном или другим подобным устройством небольшого раз- 
мера. 


Чтобы использовать запросы о возможностях, легче всего начать со стандартной 
версии веб-сайта, а потом замещать определенные части разметки. В примере на 
рис. 8.9 содержимое страницы разбито на два блока: 


<агііс1іе> 
</агііс1е> 
<аѕіае> 
</аѕіде> 


А таблица стилей начинается с двух правил, по одному для каждого блока: 


агіісіе { 
рогаег: зо1іа 1рх р1аск; 
раааіпд: 15рх; 
пагдіп: 5рх; 


раскагоџпа: уе11ом; 


Ғ1оа+: ТеЕЕ; 
міаёћһ: 330рх; 
} 
аѕіае { 
рогаег: зо1іа 1рх Б1аск; 
раааіпд: 15рх; 
пагдіп: 5рх; 


раскадгоџпа: уе11оми; 
розіііоп: арѕоІиіе; 
Ғ1оа+: Іеғё; 
пагдіп-Іе#ё: 370рх; 

} 


Эти правила реализуют стандартную двухстолбцовую компоновку страницы, где 
колонка фиксированной ширины в 330 пикселов располагается слева, а плавающая 
боковая панель занимает все оставшееся пространство справа. (Конечно же, в своих 
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примерах вы можете использовать любые компоновки, управляемые с помощью 
С55.) 


Фокус заключается в определении отдельной части таблицы стилей, которая акти- 
вируется для определенного значения запроса о возможностях. Синтаксис этого 
определения следующий: 


@тедіа (имя-свойства-запроса-о-возможностях: уа1ае) { 


/* Новые стили вставляются сюда. ЕА 


} 


В данном примере этот новый набор стилей активируется, когда ширина окна брау- 
зера становит 480 пикселов или меньше. Это означает, что в нашей таблице стилей 
нам требуется раздел, который выглядит так: 


@пеЯ1а (тах-міаєһ: 480рх) { 


СОВЕТ 


В настоящее время самыми популярными свойствами запросов о возможностях яв- 
ляются тах-дӢеуісе-міаєһ (для создания мобильных версий веб-страниц), пах- 
міаєћ (для применения разных стилей в зависимости от текущего размера окна брау- 
зера) и ос1епеаЕ1оп (для изменения компоновки страницы, в зависимости от распо- 
ложения устройства іРаа — горизонтального или вертикального). Но спецификация 
запросов о возможностях определяет еще несколько других свойств, полный список 
которых см. на ммм м3.огд/ТВ/с$$3-теЧ!ааиенез. 


Хотя внутри блока запроса о возможностях можно вставить все, что угодно, в этом 
примере просто добавляются новые правила таблицы стилей для элементов 


<агііс1е> И <аѕійе>: 


@тедіа (тах-міаһ: 480рх) { 
агіісіе { 
Ғ1оаї: попе; 
міаёһ: аџіо; 


аѕіае { 
роѕіііоп: зіаїіс; 
Ғ1оаї: попе; 


раскадгоџпа: ріпк; 
пагдіп-ІеЁі: 5рх; 


} 


Эти стили применяются в дополнение к уже определенным обычным стилям. По- 
этому может потребоваться сбросить уже измененные свойства в их значения по 
умолчанию. В этом примере стили запроса о возможностях присваивают свойству 
роѕібіоп значение ѕбабіс, свойству ғ1оа+ — значение попе, а свойству изаеь — зна- 
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чение аџ+о. Это значения по умолчанию, которые были изменены исходным прави- 
ЛОМ СТИЛЯ ДЛЯ боковой панели. 


ПРИМЕЧАНИЕ 


Браузеры, которые не понимают запросов о возможностях, такие как Іпіегпеї Ехріогег, 
просто игнорируют новые стили и применяют исходные стили независимо от размера 
окна браузера. 


При желании можно добавить другой раздел запроса о возможностях, который за- 
мещает эти правила еще меньшим размером. Например, следующий блок активи- 
рует применение новых правил, когда окно браузера сужается до 250 пикселов: 


@теЧ1а (тах-міаһ: 250рх) { 


} 


Но не забывайте, что эти правила замещают все, что было применено до этого, 
иными словами, совокупный набор свойств, установленный обычными стилями и 
блоком стилей запросов о возможностях для ширины окна менее 450 пикселов. 
Если это кажется слишком заумным, не впадайте в отчаяние — мы научимся обхо- 
ДИТЬ ЭТО С ПОМОЩЬЮ более точно определенных запросов о возможностях в сле- 
дующем разделе. 


СовеТ 


Для определения мобильных устройств наподобие смартфонов нужно использовать 
СВОЙСТВО тах-дӢеуісе-кіаіћ, а не свойство пах-кіаёћ, т. К. СВОЙСТВО мах-м1аеВ ис- 
пользует размер окна просмотра (Мемрой) телефона, т. е. блока веб-страницы, кото- 
рый пользователь веб-фона может просматривать с помощью прокруток. Типичное 
окно просмотра вдвое шире собственно экрана устройства. Более подробное объяс- 
нение этого вопроса (и рисунки, иллюстрирующие принцип работы окна просмотра) 
см. в статье "Оиігкѕ тое" по адресу ВИр:/Атуи!.сот/ууес9Зп. А запросы о возмож- 
ностях для мобильных устройств рассматриваются более подробно в разд. "Распозна- 
вание мобильных устройств" далее в этой главе. 


Продвинутые запросы о возможностях 


Иногда желательно применить даже более специфичные стили, зависящие от не- 
СКОЛЬКИХ условий, как показано в этом примере: 
@тедіа (тіп-міаёһ: 400рх) апа (ютах-міаёһ: 700рх) { 


/* Эти стили применяются к окнам шириной от 400 до 700 пикселов */ 


} 


Это особенно удобно, когда нужно применить несколько наборов взаимно исклю- 
чающих стилей, но нет желания мучиться с несколькими слоями перекрывающихся 
правил. Вот пример применения такого набора стилей: 


/* Здесь идут обычные стили. */ 


@тед1а (тіп-міаєһ: 600рх) апа (ютах-міаёһ: 700рх) { 
/* Замещаем стили для окон шириной 600-700 пикселов. */ 
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@теЧ1а (тіп-міаёєһ: 400рх) апа (тах-міаёһ: 599.99рх) { 


/* Замещаем стили для окон шириной 400-600 пикселов. */ 


@тед1а (тах-міаһ: 399.99рх) { 
/* Замещаем стили для окон шириной менее 400 пикселов. */ 


} 


Теперь для окна браузера шириной 380 пикселов будут применяться два набора 
стилей: стандартные стили и стили в последнем блоке @теа1а. Ответ на вопрос, 
упрощает или усложняет этот подход работу разработчика, зависит от того, чего 
именно он желает добиться. Если вы используете сложные таблицы стилей и часто 
меняете их, показанный здесь подход неперекрывающихся стилей часто будет са- 
мым простым способом. 


Обратите внимание, что необходимо быть осторожным, чтобы правила неожиданно 
не перекрывали друг друга. Например, если в одном правиле установить макси- 
мальную ширину в 400 пикселов, а в другом правиле указать те же 400 пикселов, 
но для минимальной ширины, то в одной точке обе настройки стилей будут совме- 
щены. Слегка неуклюжим решением этой проблемы будет использование дробных 
значений, как значение 399.99 пикселов в примере выше. 


Можно еще использовать ключевое слово по+. Функционально, по сути, это такая 
же таблица стилей, но, может быть, более понятная: 


/* Здесь идут обычные стили. */ 


@тедіа (поё пах-міаёһ: 600рх) апа (тах-міаіһ: 700рх) { 


/* Замещаем стили для окон шириной 600-700 пикселов. */ 


@тедіа (поё пах-м1АЕР: 400рх) апа (тах-міаёһ: 600рх) { 


/* Замещаем стили для окон шириной 400-600 пикселов. */ 


@пеЧ1а (тах-мтаЕр: 400рх) { 
/* Замещаем стили для окон шириной менее 400 пикселов. */ 


} 


В этих примерах есть еще один уровень замещения стилей, который нужно иметь в 
виду, т. к. каждый раздел @теаза начинается не с правил стилей для запросов о воз- 
можностях, а с обычных правил таблиц стилей. В зависимости от ситуации, может 
быть предпочтительней полностью разделить логику стилей (например, чтобы мо- 
бильное устройство получило свой, полностью независимый набор стилей). Для 
этого нужно использовать запросы о возможностях с внешними таблицами стилей, 
как рассматривается далее. 
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Полная замена таблицы стилей 


Блок ётедіа удобен ДЛЯ небольших корректировок, т. к. он позволяет содержать все 
стили вместе в одном файле. Но ДЛЯ более значительных изменений может быть 
легче просто создать полностью отдельную таблицу стилей, а потом с помощью 
запроса о возможностях создать ссылку на нее: 


<Һеаа> 
<1іпк ге1="ѕіу1Іеѕһееі" Һгеғ="ѕіапаага з6у1ез"> 


<1іпк ге1="ѕіуІеѕһееі" тейіа=" (тах-міаёһ: 480рх) " 
ргеЕ="зта11 ѕіу1еѕ.сѕѕ"> 


</Һћеаа> 


Хотя браузер загрузит со страницей и вторую таблицу стилей (та 5у[ез.с$$), она 
не будет применена, если только ширина окна браузера не отвечает указанному 
минимуму. 


Как и в предыдущем примере, новые стили будут замещать уже установленные 
стили. В некоторых случаях уместно использовать полностью отдельные, незави- 
симые таблицы стилей. Сначала к обычной таблице стилей нужно добавить запрос 
о возможностях, чтобы она применялась только для окон с большой шириной: 


<1іпк ге1="ѕіуІезһееі" тейіа=" (тіп-міаеєһ: 480.01рх) " 
ҺгеҒ="ѕбапаага ѕбу1Іеѕ"> 

<1іпк ге1="ѕіуІезһееі" педіа=" (мах-міаёһ: 480рх) " 
ргеЕ="зта11 ѕіу1Іеѕ.сѕѕ"> 


Проблема С ЭТИМ ПОДХОДОМ СОСТОИТ В ТОМ, ЧТО браузеры, которые не понимают за- 
просов о возможностях, будут игнорировать обе таблицы стилей. Эту проблему 
можно решить для старых версий Іһіегпеѓ Ехр]огег, опять добавив основную табли- 
цу стилей, но в условных комментариях: 
<11іпк ге1="зіу1еѕһееі" пеаіа=" (міп-міаёєһ: 480.01рх)" 

Һгеғ="ѕбапаага ѕбу1Іеѕ"> 


<1іпк ге1="ѕіуІезһееі" педіа=" (тах-міаёһ: 480рх) " 
ргеЕ="зта11 ѕіу1Іеѕ.сѕѕ"> 


<1--[1# 1% ТЕ 9]> 
<1іпк ге1="ѕіу1Іеѕһееі" ргеЕ="з$апЧака з6у1ез"> 
<! [епа1 ғ] --> 


Но все равно остается один небольшой пробел — версии Епеох более ранние, 
чем 3.5, не понимают запросов о возможностях и не используют раздел условных 
комментариев. Этот пробел можно было бы заполнить, определяя браузер в коде 
страницы, а потом подменяя новую страницу посредством кода ЈауаЅсгірі, но это 
будет очень громоздкое решение. К счастью, старые версии Еігеѓох встречаются все 
реже и реже. 


Кстати, запросы о возможностях отображения можно объединять с запросами 
о типах носителей, рассмотренных во врезке "Уголок ностальгии. Типы носителей 
(С55" ранее в этой главе. В таких случаях запрос о типе носителя всегда нужно ста- 
вить первым и не брать его в скобки. Например, таблицу стилей только для печати 
страницы определенной ширины можно создать следующим образом: 
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<1іпк ге1="ѕіуІезһееі" педӢіа="ргіпё апа (тіп-міаёһћ: 25см)" 
ҺгеЁ="Могта1Ргіпіѕёу1Іеѕ.сѕѕ"> 

<1іпк ге1="ѕіуІезһееі" педӢіа="ргіпё апа (пої тіп-міаєһ: 25см)" 
ҺгеЁ="МаггоиРгіпіѕёу1Іеѕ.сѕѕ"> 


Распознавание мобильных устройств 


Как мы уже узнали, выяснить, где просматривается веб-страница — на экране 
обычного компьютера или мобильного устройства, можно с помощью запроса 
о возможностях отображения, содержащего свойство пах-деуісе-кіаьћ. Но какие 
значения ширины следует использовать для этого свойства? 


Если вы пытаетесь идентифицировать смартфоны, проверяйте свойство пах-деуісе- 
міа+һ на значение, равное 480 пикселам. Это наилучшее, общеприменимое правило, 
которое определяет существующие сегодня телефоны 1Рһопе и Апаго!а: 


<1іпк ге1="ѕіуІезһееі" педіа=" (птах-дӢеуісе-міаёһ: 480рх) " 
һгеЁ="порі1е зіу1Іеѕ.сѕз"> 


Но если вы фанат железа, это правило может вызвать у вас подозрение, т. к. совре- 
менные мобильные устройства оснащены крохотными экранами со сверхвысокой 
разрешающей способностью. Например, размер экрана 1Рһопе 4 — 960х640 пиксе- 
лов. В связи с этим можно подумать, что для этих устройств нужно использовать 
большее значение ширины экрана. Но, как это ни удивительно, это не так. Боль- 
шинство смартфонов продолжает сообщать, что ширина их экрана — 480 пикселов, 
даже если они в действительности оснащены экраном высокого разрешения. Это 
объясняется применением этими устройствами поправочного коэффициента, кото- 
рый называется соотношением пикселов (ріхе1 гайо). Например, в 1Рһопе 4 каждому 
пикселу С88 соответствует в ширину два физических пиксела, т. е. соотношение 
пикселов равно 2. В действительности можно создать запрос о возможностях, кото- 
рый определяет іРһопе 4, но игнорирует более старые версии 1Рһопе: 


<1іпк ге1="ѕіу1еѕһееё" 
пеаіа=" (пах-деуісе-міаёһ: 480рх) апа 
(-меркіі-тіп-аӢеуісе-ріхе1-гаёбіо: 2)" 
ҺгеЁ="ірһопе4.сѕзѕ"> 


А 1Раа представляет особую проблему: пользователи могут поворачивать его, сори- 
ентировав экран горизонтально или вертикально. Но хотя это меняет значение ши- 
рины окна тах-міаєһ, значение ширины экрана пах-деуісе-иіаєһ не меняется. Как и 
книжной, так и альбомной ориентации экрана 1Ра4 сообщает, что его ширина экра- 
на равна 768 пикселов. К счастью, если требуется менять стили в зависимости от 
ориентации экран 1Рай, в запросах о возможностях свойство тах-деуісе-ніаєћ мож- 
но применять совместно со свойством огіепбабіоп: 


<11пКкК ге1="зіу1еѕћһееё" 
пед 1а=" (пах-деуісе-міаёһ: 768рх) апа (огіепёаёіоп: рогёгаіі) " 
һгеЁ="іРаа рогігаії.езѕз"> 

<1іпк ге1="зіу1еѕћһееё" 
пеаіа=" (пах-деуісе-міаёһ: 768рх) апа (огіепёаёіоп: Іапаѕсаре) " 
һгеғ="іРаа 1апазѕсаре.сѕѕ"> 
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Конечно же, это правило можно применять не только с устройствами 1Рай, но и 
с другими устройствами с подобными размерами экрана (в данном случае 768 пик- 
селов или меньше). 


ПРИМЕЧАНИЕ 


Сами по себе запросы о возможностях отображения недостаточны, чтобы сделать 
обычный веб-сайт дружелюбным к мобильным устройствам. Нужно еще позаботиться 
о пропускной способности и восприятии пользователя. В отношении пропускной спо- 
собности разумно использовать изображения меньшего размера, занимающие мень- 
ший объем. Это можно сделать, снабдив элементы фоновыми изображениями и уста- 
новив эти изображения в таблицах стилей. Но этот подход очень сложен для веб- 
сайтов, на которых используется большое число изображений. Для лучшего воспри- 
ятия контента пользователем нужно рассмотреть вариант разбиения содержимого на 
блоки меньшего размера (чтобы требовалось меньше прокруток) и по возможности от- 
каза от эффектов и интерактивных операций, которые трудно осуществлять через 
сенсорный интерфейс (например, всплывающие меню). 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Запросы о возможностях воспроизведения видео 


Веб-сайты для мобильных устройств явно отличаются от веб-сайтов для настольных 
компьютеров способом использования видеосодержимого. Мобильный веб-сайт мо- 
жет содержать видео, но, как правило, будет использовать видеоокно и видеофайл 
меньшего размера. Причины здесь очевидны — мобильные браузеры используют не 
только более медленные и более дорогие подключения для загрузки видео, они также 
обладают менее мощным аппаратным обеспечением для его воспроизведения. 


Применяя только что рассмотренную технологию запросов о возможностях, размер 
элемента <уідео> можно с легкостью изменить, чтобы видео можно было посмотреть 
на мобильном устройстве. Но второй важный шаг — создание ссылки на видеофайл 
меньшего размера — представляет более сложную задачу. 


НТМЕ5 предлагает решение этой задачи путем добавления атрибута тедіа непосред- 
ственно в элемент <ѕоцгсе>. Как мы узнали в главе 5, элемент <зоигсе> указывает 
файл мультимедиа для воспроизведения элементом <у19део>. Добавление атрибута 
пед {а позволяет ограничить воспроизведение определенных файлов мультимедиа на 
конкретных типах устройств. 

Далее приведен пример кода, позволяющий проиграть файл биќегћу тобііе.тр4 на 


устройствах с небольшим экраном. Для других устройств предоставляется файл 
риќегћу.тр4 или Ббиќегћу.оду в зависимости от поддерживаемого ими видеоформата. 


<у1аео сопіго1ѕ міаёћ= "400" Һеідһі="300"> 
<ѕоџгсе зхс="риеЕегЕ1у торі1е.тр4" ёуре="уіаео/тр4" 
пеаіа=" (пах-деуісе-міаёєһ: 480рх) "> 
<зойгсе згс="рибёегЕ1у.тр4" ёуре="уіадео/тр4"> 
<зойгсе згс="риёбёегЁЕ1у. осу" ёуре="уіадео/одд"> 
</уіаео> 


Но, конечно же, ответственность за кодирование файлов в разные форматы лежит на 
разработчике. Как правило, средства кодирования имеют профили для конкретных 
устройств (например, "Рад “ідео"), которые могут облегчить эту задачу. Кроме этого, 
разработчик также должен удостовериться в применении правильного формата муль- 
тимедиа для устройства (обычно это будет формат Н.264) и предоставить видеофор- 
маты для всех других браузеров. 
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Рисование эффектных рамок 


С самых ранних дней спецификации С5$ веб-дизайнеры пользовались стилями для 
форматирования рамок с содержимым. По мере того как С58 набиралась сил, пре- 
доставляемые ею возможности для оформления рамок становились все более впе- 
чатляющими, позволяя создавать разнообразные эффекты от затененных колонти- 
тулов до плавающих рисунков с подписями. А решение в С$5 задачи реагирования 
элементов на наведение курсора превратило плавающие панели в вычурные кнопки 
и другие элементы с подсветкой, позволив избавиться от неуклюжих прошлых ре- 
шений на ЛауаЗспре. Поэтому неудивительно, что некоторые наиболее популярные 
и лучше всего поддерживаемые возможности С553 могут сделать ваши рамки 
сногсшибательными независимо от их содержимого. 


Прозрачность 


Возможность делать изображения и цвета прозрачными является одним из самых 
фундаментальных строительных блоков в С553. Существуют два способа установ- 
ки прозрачности. 


Первый заключается в использовании функции хора (), которая принимает четыре 
параметра. Первые три параметра задают значения (от 0 до 255) красной, зеленой и 
синей составляющей цвета. Последний параметр задает значение прозрачности, 
или альфа, которое может быть в диапазоне от 0 (полная прозрачность) до 1 (пол- 
ная непрозрачность). 


Следующее правило задает фон ярко-зеленого цвета 50-процентной прозрачности: 


„.зеп1Егапзрагеп®Вох { 
раскагоџпа: гора (170,240,0,0.5); 
} 


Браузеры, которые не поддерживают функцию гора (), будут просто игнорировать 
это правило, и фон сохранит прозрачность по умолчанию — полная прозрачность. 


Поэтому второй подход лучше. Здесь мы сначала устанавливаем сплошной резерв- 
НЫЙ цвет, а потом заменяем его полупрозрачным цветом: 


.ѕепіёгапѕрагепіВох { 
раскагоџпа: гоф(170,240,0); 
раскагоџпа: гора (170,240,0,0.5); 
} 


Таким образом, браузеры, которые не поддерживают функцию гора (), все равно 
окрасят фон элемента, но только полностью непрозрачным цветом. 


СовеТ 


Чтобы добиться лучшего соответствия резервного цвета с основным, следует исполь- 
зовать такой резервный цвет, который наиболее точно воспроизводит эффект полу- 
прозрачности. Например, если полупрозрачный цвет накладывается на белый фон, то 
этот цвет будет выглядеть еще светлее из-за просвечивающегося белого фона. При 
выборе резервного цвета этот эффект следует принять во внимание. 
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Спецификация С553 также определяет свойство стиля орасіёу (непрозрачность), 
которое работает точно так же, как и значение альфа. Значение орасі+у тоже 
устанавливается в диапазоне от 0 до 1, позволяя сделать любой элемент полупро- 
зрачным: 
.зет1Егапзрагеп Вох { 

раскагоџпа: гор (170,240,0); 

орасіёбу: 0..5; 
} 


На рис. 8.10 показаны два примера полупрозрачности, один из которых реализован 
с помощью функции гора (), а другой — с помощью свойства орасі+у. 


9 100% 


Рис. 8.10. Два разных типа полупрозрачности. Функция гара () применяется, чтобы позволить фону 
показываться сквозь рамку, но не через текст в рамке (вверху). Свойство орасібу применяется, чтобы 
уменьшить интенсивность рисунка, где фон просвечивается сквозь изображение и текст (внизу) 


Свойство орасіёу предпочтительнее использовать вместо функции гафа() в сле- 
дующих случаях: 


О ког да нужно сделать полупрозрачными несколько цветов. Свойство орас1еу По- 
зволяет сделать полупрозрачными цвет фона, текста и рамки элемента; 


П когда нужно сделать что-то полупрозрачным, даже не зная его цвет. Например, 
потому, что цвет может устанавливаться другой таблицей стилей или кодом 
сценариев Лауазстре; 


О когда нужно сделать полупрозрачным изображение; 


П когда нужно использовать переход, т. е. эффект анимации, который делает эле- 
мент постепенно появляющимся или исчезающим (см. разд. "Создание эффек- 
тов перехода" далее в этой главе). 
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Скругление углов 


Мы уже рассмотрели простое свойство вогаек-гаа1лаз, которое позволяет скруглять 
углы рамок. Но это свойство можно настроить таким образом, чтобы придавать уг- 
лам рамок любую кривую форму. 


Прежде всего, этому свойству можно присвоить другое, единое значение радиуса 
границы. Радиус границы — это радиус обрамляющего круга. Конечно же, весь 
круг не рисуется, а только та его часть, необходимая для соединения вертикальной 
и горизонтальной границ рамки. Если установить большее значение рогдег-гадіцѕ, 
получится больший круг и более плавно скругленный угол. Как и в случае с боль- 
шинством других измерений в С5$, радиус можно задавать в разных единицах, 
включая пикселы и проценты. Кроме этого, для каждого угла можно указать от- 
дельное значение рогаег-гааіиѕ: 


.гоцџпаеавох { 
Баскагоипа: уе11ом; 
Богдег-гаЯ1яаз: 25рх 50рх 25рх 85рх; 
} 


Но это еще не все — также можно растянуть круг в эллипс, создавая кривую, более 
протяженную в одном из направлений. Для этого нужно обрабатывать каждый угол 
отдельно специальными свойствами (например, свойство рогадег-сор-1еѓє-гадіцѕ 


71 ) = ВКоцпаедВогаегѕ.Һті р- эх 
ё Коџпаеа Вогаегѕ х | | 


Рис. 8.11. Умелое использование свойства рогаег-гааіцз позволяет скруглять углы рамок 
практически любым способом 
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обрабатывает левый верхний угол), которым присваиваются два значения: одно для 
горизонтального радиуса эллипса, а другое — для вертикального: 


.гоцџпаеавох { 
Баскагоипа: уе11оми; 
рогаӢег-іор-Іе#і-гааіџѕ: 150рх 30рх; 
рогаег-іор-гідһі-гааіџѕ: 150рх 30рх; 
} 


На рис. 8.11 показано несколько примеров разных типов скругления углов. 


Фон 


Одним из быстрых способов создания привлекательных фонов и обрамлений будет 
использование изображения. Спецификация С8$53 определяет две новые возможно- 
сти, которые можно использовать для этой цели. Первая возможность — это под- 
держка нескольких фонов, которая позволяет объединить два (или больше) изобра- 
жения в один фон. Далее приведен пример кода для создания одного фона из двух 
изображений, чтобы украсить левый верхний и правый нижний углы рамки: 


.аӢесогаіедВох { 
пагдіп: 50рх; 
рааа1та: 20рх; 
раскагоџпа-іюмаде: игі ('ёор-Іе#ё.рпо'), игі ('роібот-гісћі.рпа!'); 
раскагоџпа-розѕзіііоп: Іеї бор, гідһё робот; 
раскагоџпа-гереаѓ: по-гереаї, по-гереаі; 


} 


Первым шагом в реализации этой задачи надо предоставить список любого количе- 
ства изображений в свойстве раскогоџпа-ітаде. Полученные изображения можно 
потом расположить в соответствующих местах посредством свойства раскогоцпа- 
роѕібіоп и указать, повторять ли их, с помощью свойства раскогоџпа-гереа+. При 
этом нужно следить за правильностью порядка, чтобы расположить первое изобра- 
жение в позиции, указанной в первом значении свойства раскдкоипа-роз1Е1оп, вто- 
рое — во второй и т. д. Результаты применения правила показаны на рис. 8.12. 


ПРИМЕЧАНИЕ 


Браузеры, не поддерживающие составные фоны, полностью игнорируют попытку 
установить фон этого типа. Во избежание этой проблемы сначала установите резерв- 
ный фон, присвоив цвет или изображение свойству раскагоипа или раскагоипа- 
ітаде. Только потом предпринимайте попытку установить составной фон, присвоив 
свойству БаскагоипЯ-1таде список изображений. 


А в следующем коде показан пример создания составного фона методом раздви- 
гаемой двери (зПатз 4оогз). Это испытанный временем шаблон веб-дизайна, в ко- 
тором графика меняющегося размера создается из трех частей: левого изображе- 
ния, правого изображения и чрезвычайно узкого изображения посредине: 
.аӢесогаіедВох { 


пагдіп: 50рх; 
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рааа1та: 20рх; 

раскагоипа-1таде: игі ('1еЕЕ.рпа'), игі ('тіааіе.рпо!'), игі ('гідћіё.рпод'); 
раскадгоџпа-роѕіёіоп: Іеї бор, Іеї ор, гісдһі робот; 
раскагоцпа-гереаѓ: по-гереаї, гереаё-х, по-гереаїі; 


га 


| Г Вох Васкдгоипа х 


< 16) = ВохВаскогоџпа.Һт О ~ > Ж 


0) 5 ) ВохВаскогоџпа.ћ О ~ > Х | вох Васкдгоипа 


сотЫтпеѕ имо 
пд ітадеѕ, мВ 
ѕіцопеай т И$ їор- 
апа Бойот-гідһё 
согпег$. 


Уоц сап ѕее ће ди 
мһеп уои гедіхе ће, 


Рис. 8.12. Несмотря на изменения размеров рамки, 
фоновые изображения остаются в своих углах 


Разметку этого типа можно использовать, чтобы создать фон ДЛЯ КНОПКИ. Но, 
конечно же, имея в багаже все эти замечательные новые возможности ($53, ВЫ, 
скорее всего, предпочтете создавать Такие объекты, добавляя тени, градиенты и 


другие эффекты, не использующие изображения. Следующие разделы помогут вам 
в этом. 
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Тени 


Спецификация С$53 определяет два новых типа теней: блочные тени (бох зва4о\$) 
и текстовые тени (ех{ зВа4о\з). Блочные тени обычно более полезны и имеют 
более высокий уровень поддержки, в то время как текстовые тени не работают ни в 
одной из версий Іпќегпеі Ехр|огег. Блочную тень можно использовать для создания 
прямоугольной тени позади любого блока элемента <аіу> (но не забудьте при этом 
о рамке, чтобы он продолжал выглядеть как блок). Тени могут даже следовать кон- 
турам блоков со скругленными углами (рис. 8.13). 


[2 Ѕһадомѕ МЕ 
+ С а задом. ти аб 


Зпадоме&.Тех+. 


Рис. 8.13. С помощью теней можно создавать такие эффекты, как плавающий текст (вверху), 
выступающий блок (в центре) и светящиеся кнопки (внизу) 


Рассматриваемые тени создаются посредством свойств рох-зБадом И бехі-ѕћадои. 
Далее приведен пример создания базовой блочной тени: 


.зрааомеяВох { 
Богаег: їһіп #336699 зо11а; 
Богаег-хаЯ1аз: 25рх; 
рох-ѕһайои: 5рх 5рх 10рх агау; 
} 


Первые два значения свойства ьох-зЪааом устанавливают горизонтальное и верти- 
кальное смещения тени от исходного объекта. Положительные значения смещают 
тень вниз и вправо, отрицательные — вверх и влево. Следующее значение опреде- 
ляет размер размытия (БЇш; в данном примере 10 пикселов), которое увеличивает 
расплывчатость тени. Последнее значение определяет цвет тени. Если под блоком 
находится какое-либо содержимое, подумайте об использовании функции гора () 
(см. разд. "Прозрачность" главы 6), чтобы сделать тень полупрозрачной. 


Для более тонкой настройки тени в свойство рох-ѕһадон можно добавить два зна- 
чения. Чтобы установить ширину (зргеаа) тени — подсвойство, которое расширяет 
тень, утолщая ее сплошную часть между размытыми краями, добавляется значение 
между значениями размытия и цвета: 


Бох-зВааом: 5рх 5рх 10рх 5рх дгау; 
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А чтобы создать тень, отражающуюся не наружу, а внутрь элемента, в конце списка 
значений добавляется значение 1пзе-. Лучший эффект достигается, когда тень рас- 
полагается непосредственно поверх элемента, без горизонтального или вертикаль- 
ного смещения: 


Бох-зВааом: Орх Орх 20рх 11ще іпѕеЁ; 


Таким образом создан нижний пример на рис. 8.13. Вставленные тени можно ис- 
пользовать для создания эффекта подсветки кнопок или рамок при наведении на 
них курсора мыши (см. разд. "Простой цветовой переход" далее в этой главе). 


ПРИМЕЧАНИЕ 


Помешанные на тенях разработчики могут даже использовать несколько теней, раз- 
деляя их запятыми. Но это обычно напрасная трата усилий и вычислительных воз- 
можностей. 


Свойство бехе-ѕһайом требует подобного набора значений, но в другом порядке. 
Сначала указывается цвет, за ним следует горизонтальное и вертикальное смеще- 
ния, а потом размытие: 
.Сехебрааом { 

Ғопё-ѕіле: З0рх; 

Ғопё-меідһё: ро1а; 

+ехі-ѕһайои: агау 10рх 10рх 7рх; 


Градиенты 


Градиенты — это переходы цветов, которые могут создавать широкий диапазон 
эффектов, от едва различимой тени под панелью меню до психоделически раскра- 
шенных кнопок. На рис. 8.14 показано несколько примеров градиентов. 


ПРИМЕЧАНИЕ 


На многих веб-страницах градиенты симулируются фоновыми изображениями. Но 
технология С$53 позволяет веб-разработчику определить требуемый градиент, кото- 
рый будет воспроизведен браузером. Преимущество этого подхода состоит в том, что 
он уменьшает количество файлов изображений, которые нужно обрабатывать, и пре- 
доставляет возможность создавать градиенты, которые без стыков изменяют свой 
размер, позволяя заполнять любое пространство. 


Мы уже получили определенный опыт работы с градиентами на холсте (см. разд. "Гра- 
диентная заливка фигур" главы 7); градиенты С$$53 подобны градиентам холста. 
Как и холст, СЗЗ поддерживает два типа градиентов: линейные градиенты, в кото- 
рых переход цветов осуществляется от одной полосы цвета к другой, и радиальные 
градиенты, в которых переход идет радиально от центра концентрических (но не 
обязательно) кругов. 


В С5 нет никаких специальных свойств для создания градиентов. Вместо них ис- 
пользуется функция градиента для установки свойства раскогоџпа. Но не забудьте 
сначала назначить этому свойству сплошной цвет, чтобы создать резервную залив- 
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[===> | = [© 553 
| |] бгааіепёѕ | + | С 
Є) |] Ме///СУНТМЕЗ/Свариег 08/бгафетз. Вт! а В: 


Тһіѕ Ііпеаг дгадіеп доеѕ гот согпег о согпег. Шаһ соіогѕ таке ѓог а зыБ Че еНесЕ. 
Баскагоцпа: - тог-ііпеаг- дгааіепі(ор ей, мћіќе, пабе) 


Рис. 8.14. По сути, градиенты — это всего лишь переходы цветов. 
Но этот простой рецепт позволяет создавать разнообразные эффекты 


ку для браузеров, которые не поддерживают градиенты (включая Іпѓегпеї Ехр/отег, 
который поддерживает градиенты, только начиная с версии ІЕ 10). 


Существуют четыре функции градиентов, и для всех них требуется применять пре- 
фиксы разработчиков браузеров, о которых мы узнали в разд. "Стили, специфич- 
ные для конкретных браузеров" ранее в этой главе. В этом разделе мы рассмотрим 
примеры градиентов для браузера Еігеѓох (для которых применяется префикс -пог-). 
Для поддержки браузеров Сһготе, Ѕаѓагі и Орега нужно добавить точно такие же 
значения градиентов, но с префиксами -перк1е- и -о-. 


Первой рассмотрим функцию 1іпеаг-огадіепё (). Далее приводится одна из ее про- 
стейших форм, окрашивающая блок белым цветом вверху, который переходит в 
синий внизу: 


.соІогВІепавох { 
раскагоџпа: -пох2-1іпеаг-дгадіепі (бор, мр1ее, Бе); 


} 


Заменив значение Сор На 1Іеғ+, получим линейный горизонтальный градиент. 
А указав для начала градиента угол блока, получим диагональный переход: 


раскогоџпа: -пох-1іпеаг-одгадіепі (фор ІеЁё, иһііе, 1191ЕБ1ае); 


Можно создать многоцветный градиент, предоставив список цветов. Например, 
следующее правило создает трехцветный горизонтальный градиент: 


раскадгоџпа: -пох-1іпеаг-дгаадіепі (фор, геа, огапде, уе11ом); 
Наконец, вместо равномерного распределения цветов градиента можно указать по- 


зицию начала каждого цвета посредством точек остановки градиента (отайіепі 
ѕ(0рѕ), растягивая или сжимая полосы или смещая их в ту или другую сторону. 
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Точки остановки градиентов указываются в процентах, где 0% означает начало гра- 
диента, а 100% — окончание. Следующий пример градиента растягивает оранжево- 
желтую среднюю часть: 


раскагоџпа: -пох2-Ііпеаг-адгадіепі (кор, геа 0%, огапае 20%, 
уе11ом 80%, уіоІеё 100%); 


Радиальный градиент создается с помощью функции гааіа1-дгадіеп+ (). Для нее 
нужно предоставить центр круга и цвет для внешнего края круга, где он совпадает 
С рамкой элемента. Следующее правило определяет радиальный градиент, начи- 
нающийся с белой точки в центре и переходящий к синему цвету на окружности: 


раскагоипа: -пох2-гааіа1-дгаадіепі (сігс1е, мһіёе, 1196 1ае) 


Кроме упомянутых, есть еще много других опций, которые позволяют сместить 
центр круга, растянуть круг в эллипс, указать точку окончания одного цвета и на- 
чало другого и т. п. Но разработчики браузеров все еще пытаются определиться 
с простым единообразным синтаксисом для градиентов, приемлемым для их всех. 
С другими примерами градиентов и двумя другими функциями для создания гради- 
ентов, не рассмотренными здесь (гереак1п9-11пеахг-дкаЧ1епь () И гереаёіпд-гадіа1- 
сгадіепї+ ()), можно ознакомиться в блоге, посвященном браузеру Ѕаѓагі, по адресу 
угүүүу.ууерКії.ого/1102/424/с553-огайіепѕ. Или же можно попробовать онлайновый 
инструмент корпорации М1сгозой, с помощью которого можно щелчками мыши 
создать требуемый градиент, а потом получить его разметку для всех браузеров, 
включая Іпќегпеі ЕхрІогег 10. Находится этот инструмент по этому адресу: 
Һер://бёпуоигі.сот/5гт0с5К. 


СОВЕТ 


Во всех этих примерах градиенты создавались свойством раскогоџпа. Но функции 
градиентов также можно применить и для установки значения свойства раскогоцпа- 
ітаде, что позволяет создать резервное изображение: сначала присваиваем свойству 
раскагоцпа-ітаде соответствующее изображение для менее способных браузеров, а 
потом присваиваем ему значение посредством градиентной функции. Большинство 
браузеров достаточно сообразительные и не будут загружать изображение, если оно 
им не требуется, что позволяет сэкономить на трафике. 


Создание эффектов перехода 


Добавление в С58 псевдоклассов сделало жизнь легче для всех веб-разработчиков. 
Теперь они могут создавать интерактивные эффекты с помощью псевдоклассов 
:оуег И : Ғосиѕ, не прибегая к использованию сценариев ЈауаЅсгірі. Например, что- 
бы создать меняющуюся кнопку (т. е. кнопку, реагируюшую на наведение курсора 
мыши), достаточно просто предоставить набор новых свойств стиля для псевдо- 
класса :һоуег. Эти свойства задействуются автоматически, когда пользователь на- 
водит курсор на кнопку. 


СОВЕТ 


Если вы последний из веб-разработчиков, кто еще не создавал собственную меняю- 
щуюся кнопку, то можете найти информацию по этой теме в подробном руководстве 
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"Создание \М/еБ-сайтов. Основное руководство"! 


мимим.@а{е.сот/агис!е$/с$$-гоНоуег-БиКоп$/. 


или же в статье по адресу И@р:// 


Какими бы не были псевдоклассы замечательными, они больше не являются пере- 
довой технологией. Проблема с ними состоит в их характере типа "все или ничего". 
Например, настройки стиля псевдокласса :поуег активируются сразу же при наве- 
дении курсора на элемент, т. е. происходит резкий скачок из одного стиля в другой. 
А вот в приложениях Е\азВ или в прикладных программах эффект обычно более 
утонченный. Здесь кнопка при наведении курсора может менять цвет, сдвигаться 
или подсвечиваться, но делается это с использованием тонкой анимации, зани- 
мающей долю секунды. 


Некоторые веб-разработчики начинают использовать подобные эффекты в своих 
работах, но для этого обычно требуется прибегать к помощи системы анимации 
Тауабспре от сторонних разработчиков. А теперь С333 предоставляет им более про- 
стой способ — новую возможность переходов, позволяющую осуществлять плав- 
ный переход от одного набора стилей к другому. 


Простой цветовой переход 


Чтобы понять принцип работы переходов, нужно рассмотреть реальный пример. 
Такой пример показан на рис. 8.15, где изменение цвета кнопки при наведении на 
нее курсора осуществляется с помощью возможностей перехода С$53. 


Рис. 8.15. Если бы это была обычная меняющаяся кнопка, при наведении курсора ее цвет бы менялся 
с зеленого на желтый резким прыжком. Но при использовании эффекта перехода зеленый цвет 
переходит в желтый плавно, занимая около полсекунды. Таким же образом происходит и обратный 
переход при отодвигании курсора. В результате получаем более изящную кнопку 


Смену цвета без эффекта перехода можно реализовать следующим кодом: 


.511ісКВоёёоп { 
со1ог: мһіёе; 
Ғопё-меідһё: ро1а; 
раааіпд: 10рх; 
рогаег: зо1іа 1рх р1аск; 


Баскагоипа: 1ідһёдгееп; 


согзог: роіпіег; 


1 Мак-Дональд М. Создание №еБ-сайтов. Основное руководство. — М.: Эксмо, 2010. 
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.511ісКВиёёоп:һоуег { 
со10ог: рІаск; 
раскагоџпа: уе11ом; 

} 


А этот код создает кнопку, которая форматируется только что описанным стилем: 


<Баебоп с1азѕ="ѕ1іскВибёоп">Ноуег Неге!</а> 


Чтобы получить плавное изменение цвета, т. е. переход, нам нужно в только что 
описанный стиль добавить СВОЙСТВО Егапзіїіоп. (Обратите внимание, что это свой- 
ство вставляется в обычный стиль (в данном случае стиль ѕ1іскВоббоп), а не в псев- 
докласс :поуег.) 


Как минимум, свойство єгапѕісіоп требует установки двух значений: свойства С55, 
которое нужно анимировать, и времени, на протяжении которого нужно выполнить 
изменение стилей. В данном примере переход применяется к свойству раскаогоџпа, 
а время перехода равно 0,5 секунды: 


.511ісКВоёёоп { 
со10ог: хһіёе; 
Ғопё-меідһё: ро1а; 
раааіпд: 10рх; 
рогаег: ѕзо1іа 1рх р1аск; 


Баскагоипа: 1ідһёдгееп; 

Ссогѕог: роіпіег; 
-меркії-ёгапѕіёбіоп: раскагоџпа 0.55; 
-по2-ігапѕіёбіоп: раскагоџпа 0.55; 
-о-ігапѕіііоп: Баскагоппа 0.55; 


.511сКВиоіёоп:һоуег { 
со10ог: рІаск; 
раскагоџпа: уе11ом; 

} 


Как вы, несомненно, заметили, в предыдущем коде в стиль были добавлены три 
свойства Егапз1Е1оп, вместо обговариваемого одного. Это потому, что стандарт пе- 
реходов С553 все еще находится в процессе разработки и поддерживающие его 
браузеры требуют применения префиксов разработчиков. Таким образом, чтобы 
переход работал в браузерах Сһготе, Зап, Егеѓох и Орега, нужно установить три 
значения свойства +гапзі+іоп, добавляя к каждому из них свой префикс разработ- 
чика. А для нете ЕхріІогег 10 (который, как ожидается, будет поддерживать пере- 
ходы) нужно будет добавить еще одну версию свойства, с префиксом -пз-. К сожа- 
лению, использование экспериментальных свойств может породить неопрятные 
таблицы стилей. 


Так, в данном примере присутствует один мелкий недостаток, а именно, в активи- 
рованной кнопке меняются два элемента оформления —Щ цвет самой кнопки и цвет 
текста на ней. Но эффект перехода применяется только к цвету кнопки, в результа- 
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те чего смена цвета текста происходит практически мгновенно, в то время как цвет 
кнопки меняется постепенно. 


Эту проблему можно решить двумя способами. При первом подходе свойству 
гапѕііоп присваивается список переходов, разделенных запятыми: 


.511ісКВоёёоп { 
-меркіі-ігапѕібіоп: раскагоџпа 0.55, со1ог 0.53; 
-пох-Егапзіііоп: раскагоџпа 0.55, со1ог 0.538; 
-о-ігапѕіёіоп: раскагоџпа 0.55, со1ог 0.53; 


} 


Но этот код можно сократить, если нам нужно установить переход для всех изме- 
НЯЮЩИхХСЯ свойств и при одинаковом времени перехода для них всех. В таком слу- 
чае вместо списка свойств для перехода мы просто используем ключевое слово а11: 


-меркіі-ёкапѕіііоп: а11 0.53; 


-по2-ёгапѕіііоп: а11 0.53; 
-о-ікапѕіііоп: а11 0.53; 
ПРИМЕЧАНИЕ 


Переход можно настроить более тонко. Прежде всего можно использовать свойство 
Егапѕіёіоп-ёітіпо-Ёопсііоп, которое позволяет изменять скорость перехода в про- 
цессе его осуществления. Например, начало перехода может быть медленным с по- 
следующим ускорением, или наоборот, быстрый переход в начале и замедленный в 
конце. Для коротких переходов это свойство не играет большой роли. Но в длинных и 
более сложных анимациях оно может изменить общее восприятие эффекта. Можно 
также использовать свойство ёхапѕіііоп-ае1ау, которое задерживает начало пере- 
хода на указанное время. Дополнительную информацию об этих и других свойствах 
переходов см. по адресу ммм м3З.огд/ТВ/с$$3-{гап$Июп$. 


На момент написания этой книги переходы поддерживались браузерами Орета 10.5, 
Еігеѓох 4, а также всеми версиями Ѕаѓагі и Срготе, с которыми вам когда-либо при- 
дется работать. Браузер Пиегпе! ЕхрІогег переходы не поддерживает, хотя это пла- 
нируется для версии ТЕ 10. Но отсутствие поддержки переходов — не такая и 
большая проблема, как может показаться, т.к. браузер все равно меняет стили. 
Только эта смена происходит почти мгновенно, а не с растянутым во времени пере- 
ходом. А это уже хорошая новость, т. к. веб-сайт может использовать переходы и в 
то же самое время сохранять основные визуальные стили для старых браузеров. 


Еще несколько идей с переходами 


Радует, что предоставляемая С55 возможность переходов способна простой смене 
цвета придать эстетический вид. Но если вы планируете создать искусный эффект 
реагирования вашими кнопками и меню при наведении на них курсора, существует 
много других свойств, с которыми можно применять переход. В частности, можно 
порекомендовать следующие первоклассные идеи. 


С Прозрачность. Изменяя свойство орасі+у, можно получить эффект, при кото- 
ром изображение постепенно исчезает из виду, как бы сливаясь с фоном. Только 
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помните, что изображение не должно стать полностью прозрачным, т. к. посе- 
титель вашего сайта не будет знать, куда наводить курсор, чтобы оно снова по- 
ЯВИЛОСЬ. 


П Тени. В разд. "Тени" ранее в этой главе мы узнали, как с помощью свойства 
рох-зћадон можно создать тень для любого объекта. Но правильная тень также 
может создать и хороший эффект при наведении курсора на объект. В частно- 
сти, рассмотрите использование сильно размытых теней без смещения, что соз- 
дает более традиционный эффект подсветки. 


П Градиенты. Измените линейный градиент или создайте радиальный, в любом 
случае на этот эффект будет трудно не обратить внимание. 


О Трансформации. Как мы увидим в следующем разделе, посредством трансфор- 
маций можно переместить и изменить форму и/или размеры любого элемента. 
Это свойство делает их идеальным инструментом для переходов. 


С другой стороны, как правило, неудачно использовать переходы с такими элемен- 
тами графического дизайна, как промежутки между рамками элементов и их со- 
держимым, полями и текстом со шрифтами разного размера. Эти операции потре- 
буют больше вычислительных ресурсов (т. к. браузеру требуется выполнить пере- 
расчет компоновки или модификации текста), вследствие чего они выполняются 
медленно и рывками. Если вам нужно что-то переместить, увеличить или умень- 
шить, лучше всего использовать трансформацию, как рассматривается в следую- 
щем разделе. 


Трансформации 


Когда мы изучали возможности холста, то затронули возможность трансформа- 
ций — способов перемещения, масштабирования, наклона и вращения содержимо- 
го. На холсте трансформации можно использовать для изменения рисуемой на нем 
графики. А трансформации С$53 служат для изменения внешнего вида элементов. 
Подобно переходам анимации, трансформации С553 являются новой и экспери- 
ментальной возможностью. Поэтому при их использовании нужно указывать 
несколько версий свойства єгапѕѓогт, каждую со своим префиксом разработчика 
браузеров. Далее приведен пример правила трансформации для вращения элемента 
со всем его содержимым: 


.госакечЕ1етете { 
—по7-Сгап$Еогт: гогафе (45аед); 
-меркіі-їгапѕҒогт: гобафе (45дед); 
-о-ЕгапзѕіЁогт: гоѓаїе (45аед); 


ДЛЯ ТЕХ, КТО ПОНИМАЕТ 
Не забывайте о старых браузерах 


Как мы уже знаем, браузеры, которые не поддерживают переходы, переключаются от 
одного стиля к другому мгновенно, что обычно не очень хорошо воспринимается. Кро- 
ме этого, старые браузеры также игнорируют возможности С$$3 для изменения сти- 
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лей, например добавление тени и заливки градиентом кнопки, на которую наведен 
указатель мыши. Это уже намного хуже, т. к. посетители с такими браузерами вообще 
не смогут наслаждаться эффектами, вызываемыми наведением курсора на элемент. 


Эта проблема решается использованием резервного решения, которое старые брау- 
зеры понимают. Например, можно создать составное правило для состояния наве- 
денного курсора, которое сначала задает некоторый цвет фона и только потом уста- 
навливает градиент. Таким образом, при наведении курсора на элемент старые брау- 
зеры смогут увидеть требование изменить цвет фона на некоторый сплошной цвет, а 
более способные браузеры — правило изменить цвет фона на градиентную заливку. 
Для еще более продвинутых возможностей можно воспользоваться инструментом 
Моаегпіхг, который позволит вам определить совершенно иные стили для старых 
браузеров (см. разд. "Стратегия 3: добавляйте резервные решения с помощью 
Модегп/2!" ранее в этой главе). 


В предыдущем примере функция гоѓёа+е () вращает элемент на 45° вокруг его цен- 
тра. Но существует много других функций трансформаций, которые можно приме- 
нять отдельно или совместно. Например, следующее правило стиля соединяет 
в цепочку три трансформации. Сначала элемент увеличивается в полтора раза (ис- 
пользуя трансформацию зса1е), потом перемещается на 10 пикселов влево (посред- 
ством трансформации зса1ех) и, наконец, наклоняется на 10° (используя трансфор- 
мацию зкем): 


.госакечЕ1етете { 


—по7-ЕгапзЕогм: зса1е (1.5) зса1ех(10рх) зКкем(10аед); 
-меркіі-ігапѕҒогт: зса1е (1.5) зса1ех(10рх) зКем(10адед) ; 
-о-ігапѕЁогт: зса1е (1.5) зса1ех (10рх) зКкем(10аед); 
} 
ПРИМЕЧАНИЕ 


Трансформация зкем искажает форму элемента. Например, возьмем правильный 
прямоугольник с закрепленным основанием. Если мы начнем толкать его верхнюю 
часть в сторону, то она сместится, в то время как основание останется на месте. В ре- 
зультате получим параллелограмм. Дополнительную информацию по трансформаци- 
ям см. в документации для браузера Еігеїох по адресу ИЧр:/Атуи!.сот/6бдег2мр, но 
не забудьте задать соответствующие префиксы разработчиков при использовании их 
для других браузеров. 


Применение трансформации К какому-либо элементу страницы не влияет на другие 
ее элементы или ее компоновку. Например, если увеличить элемент, то он просто 
надвинется на смежные с ним элементы. 


Трансформации и переходы хорошо применять вместе. Допустим, что вы хотите 
создать галерею изображений, наподобие показанной на рис. 8.16. 


Разметка этого примера начинается довольно просто, помещая набор изображений 
в контейнер <аіу>: 


<аіу с1азѕ="да11егу"> 
<іпа згс="роппу.јрд"> 
<1иа згс="саі.јрд"> 
<іпо згс="аод.јрд"> 
<1иа згс="р1аёуриѕ.јро"> 
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<1иа згс="дооѕе.јрд"> 
</аіу> 


Для элемента <аіу>, содержащего изображения, применяется следующее правило 
СТИЛЯ: 


.да11еку { 
птагдіп: Орх З0рх 0рх 30рх; 
Баскагоипа: #О8ЕЕЕЕ; 
раааіпд: 10рх; 


} 


А каждый элемент <ітд> оформляется следующим стилем: 
.да11еку ітд { 


пагдіп: 5рх; 
раааіпд: 5рх; 
міаёћһ: 75рх; 
рогаег: ѕзо1іа 1рх р1аск; 


раскадгоџпа: "пе; 
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Рис. 8.16. В данном примере трансформация используется, чтобы выделить изображение, 
на которое наведен указатель мыши 


Обратите внимание, что для всех изображений указаны явные размеры посредст- 
вом свойства міаєћ. Причиной этому является то обстоятельство, что в примере ис- 
пользуются изображения слегка большего размера, которые уменьшаются при ото- 
бражении на странице. Это делается преднамеренно: Таким способом мы удостове- 
ряемся в том, что браузер будет иметь всю требуемую информацию, чтобы 
увеличить изображение в операции трансформации. Если бы мы пропустили этот 
шаг и использовали файлы уменьшенных изображений, увеличенная версия была 
бы расплывчатой. 


Теперь перейдем к эффекту, активируемому наведением указателя мыши. Когда 
пользователь наводит указатель мыши на изображение, активируется последова- 
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тельность операций трансформации, которые слегка вращают и увеличивают изо- 
бражение: 


.да11егу ітд:һоуег { 


-меркіі-ігапѕҒогт: зса1е (2.2) гоїаѓе (10аед); 


-пох-ёгапѕЁогт: зса1е (2.2) гобаёе (10аеч); 


-о-ігапѕЁогт: зса1е (2.2) гобаѓёе (100ед); 


} 


Нов данном случае эти преобразования выполняются моментально — сейчас здесь, 
а потом там. Этот эффект можно сделать более плавным и естественным с по- 
мощью перехода, применяемого для обеих операций: 


.аа11егу ітд { 


пагдіп: 5рх; 


раааіпд: 5рх; 


міаёћһ: 


75рх; 


рогаег: з011а 1рх р1Іаск; 
—-мерк1-Егапз1%1оп: а11 15; 
-по2-ігапѕіібіоп: а11 15; 


—о-Егапз11оп: а11 15; 


раскадгоџпа: "пе; 


} 


Теперь процесс вращения и увеличения изображения происходит в течение одной 
секунды, и столько же времени занимает преобразование в исходное состояние при 
снятии указателя мыши с изображения. 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
Будущее эффектов на основе С$$ 


Рассмотренные здесь примеры едва затронули возможности, предоставляемые функ- 
циями трансформаций и переходов. Хотя разработка этих функций еще далека от за- 
вершения, вы можете использовать несколько других экспериментальных возможно- 
стей, чтобы расширить их функциональность. 


Трехмерные (30) трансформации. Когда вам надоест перемещать и изменять 
элементы в двухмерном пространстве, можно попробовать делать это в трехмер- 
ном с помощью ЗО-трансформаций. Дополнительную информацию по этому во- 
просу см. здесь: ммм.меркії.огд/0109/386/3а-їгапѕѓогтѕ. 


Анимация. В настоящее время переходы ограничены довольно простыми взаимо- 
действиями, по большому счету только наведением указателя мыши (псевдокласс 
:роуег) и получением фокуса (псевдокласс : Ғосиѕ). Возможность анимации рас- 
ширяет область применения переходов, позволяя применять их динамически, реа- 
гируя на событие Јауа$сгірї. Например, можно создать эффект вращения элемен- 
та, который активируется нажатием кнопки. Документацию по анимации средства- 
ми С$$3 см. здесь: ммм мм3.огд/ТВ/с$$3-апитаНоп$. 


Код Чауа$ сир. Включая и выключая стили посредством кода Јауа5сгірі, можно 
создавать сложные объекты пользовательского интерфейса, например, трехмер- 
ную карусель изображений или разворачиваемую группу панелей (часто назы- 
ваемую гармошкой). Ознакомиться с несколькими примерами можно здесь: 
ћіїр://сѕ53.бгааѕһамепїегргіѕеѕ.сот. 
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Но в настоящее время ни одна из этих возможностей не будет стоить потраченных на 
ее реализацию усилий. Прежде всего, с ними требуется использовать префиксы раз- 
работчиков браузеров, вследствие чего можно очень легко допустить ошибки в коде, 
что и вызывает необходимость тестирования страницы на всех основных браузерах. 
Кроме этого, многие из сегодняшних браузеров не поддерживают эти возможности. 
Например, на момент написания этой книги ни одна из версий Іпќегпеї Ехрюгег и Орега 
не поддерживали анимацию. Не поддерживает ее также и Еігеѓох 4. А пытаться разра- 
ботать обходное решение значит затратить больше усилий, чем на использование 
другого подхода с самого начала. 


В настоящее время лучшим практическим решением для эффектов анимации будет 
какая-либо библиотека Јаха$сгірі, наподобие јОиегу ОІ или МооТоо!$. Но будущее 
веб-эффектов, несомненно, за технологией С$53, когда стандарты примут закончен- 
ную форму и современные браузеры будут установлены на всех компьютерах в мире. 
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ГЛАВА 9 


Хранение данных 


В Интернете информацию можно сохранять в двух местах: на веб-сервере и на веб- 
клиенте (т. е. компьютере посетителя страницы). Определенные типы данных луч- 
ше хранить в одном из этих мест, а другие типы — в другом. 


Правильным местом для хранения конфиденциальных и важных данных будет веб- 
сервер. Например, если вы положите какие-либо товары в свою корзину в онлайно- 
вом магазине, данные о вашей потенциальной покупке сохраняются на веб-сервере. 
На вашем компьютере сохраняется лишь несколько байтов данных для отслежива- 
ния, содержащих информацию о вас (или, вернее, о вашем компьютере), чтобы веб- 
сервер знал, какая из корзин ваша. Даже с новыми возможностями НТМІ5 изме- 
нять эту систему нет надобности — она надежная, безопасная и эффективная. 


Но хранение данных на сервере не всегда является лучшим подходом, т. к. иногда 
легче хранить второстепенную информацию на компьютере пользователя. Напри- 
мер, имеет смысл хранить локально пользовательские настройки (скажем, пара- 
метры, которые определяют способ отображения веб-страницы) и состояние при- 
ложения (снимок текущего состояния веб-приложения), чтобы посетитель мог про- 
должить его выполнение с того же самого места позже. 


До НТМІ5 единственным способом локального хранения данных было использо- 
вание механизма файлов сооќіеѕ, который первоначально был разработан для обме- 
на небольшими объемами идентифицирующей информации между веб-серверами и 
браузерами. Файлы сооКіеѕ подходят идеально для хранения небольших объемов 
данных, но модель ЈауаЅстірі для работы с ними несколько неуклюжа. Система 
файлов сооКіеѕ также вынуждает разработчика возиться со сроками действия и бес- 
полезно пересылать данные туда и обратно по Интернету с каждым запросом стра- 
ницы. 


В НТМГ5 вводится лучшая альтернативная возможность файлам сооКіеѕ, которая 
позволяет легко и просто сохранять информацию на компьютере посетителя. Эта 
информация может храниться на клиентском компьютере неограниченное время, 
не отправляется на веб-сервер (если только разработчик не сделает это сам), может 
быть большого объема и для работы с ней требуется всего лишь пара простых, эф- 
фективных объектов Јауа$стірі. Эта возможность называется веб-хранилищем и 
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особенно хорошо подходит для применения с автономным режимом работы веб- 
сайтов, рассматриваемым в главе 10, т. к. позволяет создавать самодостаточные ав- 
тономные приложения, которые могут сохранять всю требуемую им информацию 
даже при отсутствии подключения к Интернету. 


В этой главе мы подробно исследуем веб-хранилище, а также рассмотрим еще 
одну, более новую технологию, которая позволяет определенным браузерам считы- 
вать содержимое других файлов на жестком диске клиентского компьютера. 


Основы веб-хранилища 


Функциональность веб-хранилища НТМІ5 позволяет веб-странице сохранять дан- 
ные на компьютере посетителя. Эта информация может быть кратковременной, ко- 
торая удаляется после выключения браузера, или долговременной, которая остается 
доступной при последующих посещениях веб-страницы. 


ПРИМЕЧАНИЕ 


Сохраняемая в веб-хранилище информация в действительности сохраняется не в Ин- 
тернете, а на компьютере посетителя веб-страницы. Иными, словами, веб-хранилище 
означает хранение данных не в Интернете, а хранение данных из Интернета. 


Существуют два типа веб-хранилищ, которые так или иначе связаны с двумя объ- 
ектами. 


С Локальное хранилище использует объект 1оса15+огаде для хранения данных 
для всего веб-сайта на постоянной основе. Это означает, что если веб-страница 
сохранит данные в локальном хранилище, эти данные будут доступны для поль- 
зователя, когда он возвратится на эту веб-страницу на следующий день, на сле- 
дующей неделе или в следующем году. Конечно же, большинство браузеров 
также предоставляет пользователю возможность очистить локальное хранили- 
ще. В некоторых браузерах она реализована как стратегия "все или ничего", и 
посредством ее удаляются все локальные данные, во многом подобно тому, как 
удаляются сооКк1еѕ-файлы. (В действительности, в некоторых браузерах система 
сооКіеѕ и локальное хранилище взаимосвязаны, так что единственным способом 
удалить локальные данные будет удаление сооК1ез.) А другие браузеры могут 
предоставлять пользователю возможность просмотра данных для каждого от- 
дельного веб-сайта и удалять данные для выбранного сайта или сайтов. 


П Хранилище данных сеансов использует объект ѕеѕѕіопѕсогаде для временного 
хранения данных для одного окна или вкладки браузера. Эти данные доступны 
лишь до тех пор, пока пользователь не закроет окно или вкладку, после чего се- 
анс заканчивается и данные удаляются. Но данные сеанса сохраняются, если 
пользователь переходит на другой веб-сайт, а потом возвращается обратно при 
условии, что это происходит в том же окне браузера. 


СОВЕТ 


С точки зрения кода веб-страницы, как локальное хранилище, так и хранилище данных 
сеансов работают абсолютно одинаково. Разница состоит лишь в длительности хра- 
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нения данных. Использование локального хранилища предоставляет наилучшую воз- 
можность для сохранения требуемой информации для последующих посещений веб- 
страницы пользователем. А хранилище сеансов служит для хранения данных, кото- 
рые нужно передавать от одной страницы другой. (В хранилище сеансов можно также 
хранить временные данные, используемые только на одной странице, но для этой це- 
ли прекрасно работают обычные переменные УауаЗспйрь.) 


Как локальное хранилище, так и хранилище сеансов связано с доменом веб-сайта. 
Таким образом, если сохранить в локальном хранилище данные для страницы 
Ұүүү.СоаєѕСапЕоаѓ.ого/сате/таррег.ћі, эти данные будут доступны для стра- 
ницы мүү.СоаѕСапЕаёќ.ого/сопѓасе.ћті, т. к. обе эти страницы имеют один и 
тот же домен — мүҰүү.СоаѕСапЕоаѓ.ого. Но эти данные не будут доступны для 
страниц других доменов. 


Кроме ЭТОГО, Т. К. веб-хранилище расположено на компьютере (или мобильном уст- 
ройстве) данного пользователя, оно связано с этим компьютером, и веб-страница, 
открытая на данном компьютере и хранящая данные в его локальном хранилище, 
не имеет доступа к информации, которую она сохранила на другом компьютере. 
Подобным образом веб-страница создает отдельное локальное хранилище, если вы 
войдете в систему под другим именем пользователя или запустите другой браузер. 


ПРИМЕЧАНИЕ 


Хотя спецификация НТМЕ5 не устанавливает никаких жестких правил в отношении 
максимального объема хранилища, большинство браузеров ограничивают его 
5 Мбайт. В этот объем можно упаковать много данных, но его будет недостаточно, ес- 
ли вы хотите использовать локальное хранилище для оптимизации производительно- 
сти и кэшировать в нем изображения или видео большого объема (и, по правде гово- 
ря, локальное хранилище не предназначено для таких целей). Для хранения большого 
объема данных все еще развивающийся стандарт базы данных п4ехеарВ (см. врезку 
"Практические занятия для опытных пользователей. В мире баз данных" в конце 
этой главы) допускает локальное хранение намного большего объема — обычно 
50 Мбайт для начала и больше, по согласию пользователя. 


Сохранение данных 


Прежде чем поместить фрагмент информации в локальное хранилище или храни- 
лище сеансов, ему необходимо присвоить описательное имя. Это имя называется 
ключом (Кеу) и нужно для того, чтобы данные можно было извлечь в будущем. 


Синтаксис для сохранения фрагмента данных следующий: 


Іоса15іогаде [кеуМате] = Аафа; 


Допустим, например, что нам нужно сохранить фрагмент текста, присвоив ему имя 
текущего пользователя. Для этих данных мы можем использовать ключ изег папе: 


1оса15огаае ["иазег пате"] = "Магку Магк"; 


Конечно же, сохранять фрагмент статического текста не имеет смысла. Как прави- 
ло, нам требуется сохранять какие-либо переменные данные, например текущую 
дату, результат математического вычисления или текстовые данные, введенные 
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пользователем в поля формы. Далее приведен пример сохранения введенных поль- 
зователем текстовых данных: 


// Получаем текстовое пол 


уаг патеІприё = аосомепе .че Е1етеп®ВуТа ("изехМапе") ; 


// Сохраняем тест, введенный в текстовое поле. 


Іоса15ёогаде["иѕег пате"] = памеТпри®.уа1ще; 


Данные из локального хранилища извлекаются так же легко, как и помещаются ту- 
да. Например, следующая строка кода берет сохраненные ранее данные и выводит 
их в окне сообщений: 


а1ег® ("Вы сохранили: " + 1оса15$огаде ["азег папе"]); 


Этот код возвратит данные независимо от того, когда они были сохранены — пять 
минут или пять месяцев тому назад. 


Конечно же, существует возможность, что данные вообще не были сохранены. 
Проверить, является ли ячейка хранения пустой, можно так: 


1Е (1оса15Еогаде["азехг пате"] == пџ11) { 


а1егі ("Вы еще не ввели свое имя"); 
} 
е1зе { 


// Выводим данные, т. е. имя пользователя, в текстовом поле. 


аосотепЕ . дееЕ1етепЕВуТтАа ("изегМаме") .уа]1ае = 1оса15огаае["азег папе"]; 


} 


Сохранение данных в хранилище сеансов осуществляется так же легко. Разница 
состоит лишь в использовании объекта зезз1опб$огаде вместо объекта 1Тоса15®огкаде: 


// Получаем текущую дату. 
уаг бодау = пем Рафе(); 


// Сохраняем время в виде текста в формате ЧЧ:мм. 


зеѕѕзіопдіогаде ["1аѕі0рааёеТіте" ] = іодау.деЕНоцгѕ () + ":" + 
Тодау.деі-Міпиёезѕ (); 


На рис. 9.1 показана простая тестовая страница, демонстрирующая все изложенное. 
Испытать эту страницу в действии (и убедиться, что сеансовые данные удаляются 
после закрытия окна, а локальные данные сохраняются неопределенное время) 
можно на веб-сайте этой книги (Һёєр://уууу.ргоѕеѓесһ.сот/Љті5/), запустив файл 
ҰебЅ'огаре.һті. 


ПРИМЕЧАНИЕ 


Веб-хранилище также поддерживает менее распространенный синтаксис свойств. Со- 
гласно правилам этого синтаксиса, мы обращаемся к ячейке хранения с именем 
изехг папе как Іоса1ѕіогаде.цѕег папе, а не Іоса15їогаде ["изег пате" ]. Оба типа 
синтаксиса равнозначны, и использование того или другого является вопросом лично- 
го предпочтения. 
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) 14) САНТМЕЗ\ СВарёег О9\МуеБ$огаде. Нат! р- эх 
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ҰЕВ ЅТОКАСЕ 
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ѕіогаре: 


Тһіѕ вое іпіо 
ѕеѕзіоп ѕіогаре: 


[Зауе Баша ) [ іоаа ба ) 


100% ~ 


Рис. 9.1. Страница содержит два текстовых поля: для локального хранилища (вверху) и для хранилища 
сеансов (внизу). Нажатие кнопки Заме Юаїа сохраняет текст, введенный в текстовые поля, а нажатие 
кнопки оаа раќа выводит в полях соответствующие сохраненные данные 


АВАРИЙНАЯ СИТУАЦИЯ 
Веб-хранилище не работает без веб-сервера 


В своих исследованиях веб-хранилища вы можете столкнуться с неожиданной про- 
блемой. Во многих браузерах веб-хранилище работает только для страниц, предос- 
тавленных веб-сервером. При этом не важно, где расположен сервер, в Интернете 
или на вашем собственном компьютере, самое главное, просто чтобы страницы не за- 
пускались с локального жесткого диска (например, двойным щелчком по значку файла 
страницы). 

Эта особенность является побочным эффектом способа, которым браузеры выделяют 
место в локальное хранилище. Как ранее говорилось, браузеры ограничивают локаль- 
ное хранилище для каждого веб-сайта 5 Мбайт, для чего им нужно ассоциировать 
каждую страницу, которая хочет использовать локальное хранилище, с доменом веб- 
сайта. 


Что же происходит, если открыть страницу, которая использует веб-хранилище, с ло- 
кального жесткого диска? Все зависит от браузера. Браузер {егпе{ Ехрогег, похоже, 
полностью утрачивает поддержку веб-хранилища. Объекты Іоса15Ѕіогаде и 
ѕеѕѕзіопѕіогаде исчезают, и попытка использовать их вызывает ошибку Јауа$сгірї. 
В браузере Еігеѓох объекты Іоса1Ѕіогаде и ѕеѕѕіопѕіогаде остаются на месте и, 
вроде бы, поддерживаются (даже Мойегпіхг определяет, что поддерживаются), но все, 
что отправляется на хранение, исчезает неведомо куда. В браузере Сһготе опять же 
что-то другое — большая часть функциональности веб-хранилища работает как сле- 
дует, но некоторые возможности (например, событие опѕіогасе) не работают. Подоб- 
ные проблемы возникают и с использованием интерфейса Е!е АР! (см. разд. "Чтение 
файлов" далее в этой главе). Поэтому вы избавите себя от многих хлопот, если по- 
местите тестируемую страницу на тестовый сервер, чтобы избежать всех этих неоп- 
ределенностей. Примеры можно также проверять на веб-сайте этой книги — 
ћїр://муу.ргоѕеїесһ.сот/һіті5/. 


Практический пример: 
сохранение текущего состояния игры 
На данном этапе у вас может сложиться впечатление, что работа с веб-хранилищем 


не представляет ничего особенного: нужно всего лишь выбрать ключ для данных и 
заключить его в квадратные скобки. По большему счету вы будете правы. Но ло- 
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кальному хранилищу можно дать дополнительное, более практическое применение, 
не прилагая для этого дополнительных усилий. 


Возьмем, например, игру-лабиринт на основе холста, которую мы рассмотрели в 
разд. "Практический пример: игра "Лабиринт"" главы 7. На определенном этапе 
игры пользователь может отвлечься, но при этом он, вероятно, захочет не просто 
бросить игру, а сохранить ее текущее состояние, чтобы возобновить ее с этого мо- 
мента. В таком случае имеет смысл сохранить текущее состояние игры, чтобы 
пользователь мог возвратиться к ней позже. 


Существует несколько способов реализации такой возможности. Можно просто 
сохранять новую позицию после каждого хода. Поскольку локальное хранилище 
обладает высоким быстродействием, такой подход вполне реализуем. Либо можно 
реагировать на событие страницы веѓогеуп1оаа и запрашивать пользователя, не же- 
лает ли он сохранить текущее состояние (рис. 9.2). 


] Сапуаѕ Маге бате 9р 


<= Э С О 1осаіһоѕ/Мағеһіп т" 


© тһе раде аї Іоса!һозї зауз: 


Оо уои мапі їо ѕауе уоиг сштепї роѕііоп іп {Пе таге, Ёог 
пехі їте? 


т 


Га) 


Рис. 9.2. Когда пользователь покидает эту страницу, переходя на новую страницу или закрывая окно, 
игра предлагает сохранить свое текущее состояние 


Код, который предлагает сохранить информацию о состоянии игры, выглядит так: 


м1паом .опреЕогеип1оаа = Ёоџпсёіоп (е) { 


// Проверяем, существует ли объект 1оса15ёогаде (т. к. нет смысла 


// предлагать сохранять состояние, если мы не сможем это сделать). 
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1Е (1оса15ёогаде) { 
// Выводим запрос о сохранении состояния. 
1Е (сорЕ1тм ("ро уои мапі іо зауе уойк соггепі роз1Е1оп 
іп Ре паге, Еог пехі &1ме?")) { 


ДУ Сохраняем две координаты в ячейках хранилища. 


Іоса15ёогаде ["магеСаше сигкеп®Х"] = х; 
Іоса15іогаде ["тахеСате соггепіҮ"] = у; 
} 
} 
} 
СОВЕТ 


Используйте длинный ключ сохраняемых данных наподобие пахебаме сигкеп(Х. 
В конце концов разработчик должен обеспечить однозначность ключей, чтобы один и 
тот же ключ случайно не использовался двумя (или, еще хуже, несколькими) веб- 
страницами для сохранения разных фрагментов данных. При наличии только одного 
контейнера для сохранения всех данных породить конфликт ключей проще всего, что 
является одной из кричащих слабостей системы веб-хранилища. Во избежание по- 
добного рода проблем следует разработать план для создания логичных и описатель- 
ных ключей. Например, если у вас есть игра "Лабиринт" на нескольких страницах, 
следует рассмотреть добавление названия страницы в ключ, например Маге01_ 
сиггеп(Х. 


При следующей загрузке страницы можно проверить, существует ли эта инфор- 
мация: 


// Возможность локального хранилища поддерживается? 
1Е (1оса15ёогаде) { 

// Пытаемся получить данные 

хаг зауеах = 1оса15іогаде ["тахебате сиггепіх"]; 


хаг зауеау = 1оса15іогаде ["тахебате сиггепіҮ"]; 


// При нулевых значениях переменных не сохраняем никаких данных. 
// В противном случае устанавливаем новые координаты 
// по сохраненным данным. 
1Е (ѕауеах != по11) х = Мопрег (ѕауеах); 
1Е (ѕауеаү != пи11) у = Матрег (ѕахуеаү); 
} 


В данном примере показано, как сохранять состояние приложения. Если бы мы не 
хотели надоедать пользователю каждый раз при выходе из игры, можно было бы 
добавить флажок для автоматического сохранения состояния игры при выходе. При 
таком подходе состояние игры будет сохраняться автоматически, если этот флажок 
установлен. Конечно же, здесь нам также нужно было бы сохранять состояние 
флажка, что дает нам пример сохранения настроек приложения. 


В этом примере также используется функция мопрег () Јауа$Ѕсгірі, позволяющая 
удостовериться в том, что сохраняемые данные преобразованы в действительные 
числа. Важность этого момента рассматривается в разд. "Сохранение чисел и дат" 
далее в этой главе. 
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Поддержка веб-хранилища браузерами 


Веб-хранилище является одной из наиболее поддерживаемой возможностью 
НТМІ5, с хорошим уровнем поддержки в каждом основном браузере. В табл. 9.1 
приведены минимальные версии основных браузеров, поддерживающих веб- 
хранилище. 


Таблица 9.1. А. браузерами локального хранилища и хранилища данных сеансов 


Минимальная Е 
версия 


Все эти браузеры предоставляют возможность локального хранилища и хранилища 
данных сеанса. Но для поддержки события опѕєогаде (менее распространенной 
возможности, которая рассматривается в разд. "Реагирование на изменения в хра- 
нилище" далее в этой главе) требуются более поздние версии браузеров, например 
ТЕ 9, Етеѓох 4 или Сһтготе 6. 


Самой проблемной является версия [Е 7, которая не поддерживает веб-хранилище 
вообще. В качестве обходного решения можно эмулировать веб-хранилище по- 
средством файлов сооКіеѕ. Это не совсем идеальное решение, но оно работает. Хотя 
официального сценария для закрытия этого пробела не существует, несколько хо- 
роших отправных точек можно найти на странице заполнителей С1їНир по адресу 
Һер://бёпуогі.сот/роіуё (в разделе "\еђ Ѕіогаре"). 


Продвинутые методы работы 
с веб-хранилищем 


На данном этапе мы познакомились с основами работы С веб-хранилищем —щЩ как 
помещать информацию в него и извлекать эту информацию оттуда. Но нам нужно 
знать еще несколько подробностей и полезных методов, прежде чем мы сможем 
применять его. В последующих разделах мы изучим, как удалять информацию ИЗ 
веб-хранилища и просматривать всю находящуюся в нем в данный момент инфор- 
мацию. Также мы рассмотрим, как работать с разными типами данных, сохранять 
пользовательские объекты и реагировать на изменения в коллекции хранящихся 
данных. 


Удаление элементов 


Задача удаления хранящихся в веб-хранилище данных проста до предела. Для уда- 
ления отдельного ненужного элемента используется метод гепоуетеещ(), которому 
передается соответствующий ключ: 


1оса15®огаде . гетоуеТ%ет("азег пате"); 


Глава 9. Хранение данных 335 


А если же требуется удалить все локальные данные, сохраненные веб-сайтом, ис- 
пользуется более радикальный метод с1Іеаг (): 


зеѕзѕіопдіогаде.с1Іеаг (); 


Поиск всех сохраненных элементов 


Чтобы извлечь отдельный элемент данных из веб-хранилища, нам нужно знать его 
ключ. Но есть еще один ловкий прием. Посредством метода кеу() можно извлечь 
все элементы, хранящиеся в локальном хранилище или в хранилище сеансов (для 
текущего веб-сайта), даже если нам не известны их ключи. Этот метод полезен при 
отладке или когда нужно просто просмотреть, какие данные сохраняют другие 
страницы веб-сайта и под какими ключами. 


На рис. 9.3 показаны результаты применения этого метода. 


реет" [= 18 №583 
1 1 Ета АН ет | + -4 
Ф) Һёр:/Лосаіһозі/ЕіпаАетѕ.Һті 7 @| № №: 


| Битр Ме сощет о [оса! Ѕіогаде І 


® ег пате: Ғабшоиѕ Воь 
® гпагеСате сиггепіҮ: 5 
® ѕаүе роѕійоп ацџіотайсаПу: ігие 


® гпагеСате сиггепіХ: 268 


Рис. 9.3. Нажатие кнопки вверху окна выводит содержимое веб-хранилища 


В этом примере нажатие кнопки активирует функцию ғіпад11ієетз (), которая ска- 
нирует коллекцию элементов в локальном хранилище. Далее приводится полный 
код примера: 


Ғопсііоп ЁҒіпад111Іёетмѕ () { 
// Получаем элемент <иі> для списка элементов данных. 
уаг 16епТ1$Е = аоситепі .деїЕ1етепЕВуІа ("1ЕепТ1 36"); 


// Очищаем список. 
ібетіізі.іппегнНтмі = ""; 


// Перебираем все элементы данных в цикле. 
Ғог (уаг 1=0; і<1оса15іогаде.Іепоїћ; 1++) { 


// Получаем ключ для текущего элемента. 
уаг Кеу = 1Іоса15іогаде.Ккеу (1); 


// Получаем элемент, хранящийся под этим ключом. 


уаг ібет = 1оса15$огаае [кеу]; 
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// Создаем с этой информацией новый элемент списка и добавляем 


// его на страницу. 


уаг пемТеет = Чосомеп® . сгеаёеЕ1етепі ("11"); 
пемІёем.іппегнНтТмі = кеу + ": " + ііет; 
ібетізѕё .аррепасһі1а (пемІбет); 


Сохранение чисел и дат 


До сих пор в наших исследованиях веб-хранилища мы обходили стороной ОДИН 
важный аспект. А именно — все данные, сохраняемые посредством объектов 
1оса15огаде И зезз1опбкогаде, автоматически преобразуются в текст. 


Со значениями, которые и так являются текстовыми (например, имя пользователя, 
вводимое в текстовое поле), это обстоятельство не представляет никаких проблем. 
Но числа не такие сговорчивые. Возвратимся к примеру сохранения состояния иг- 
ры "Лабиринт" (см. разд. "Практический пример: сохранение текущего состояния 
игры" ранее в этой главе). Если мы забудем преобразовать координаты обратно 
в числа, то можем столкнуться со следующей проблемой: 


// Получаем последнюю позицию координаты х. 
// Возвращается, например, текст "35". 
х = Іоса15іогаде ["тахебате соггепіх"]; 


// Увеличиваем координаты. 
// К сожалению, Јауаѕсгірі преобразует "35"+"5" в "355". 
х += 5; 


Это явно не то, что нам требуется. По сути, этот код поместит значок в совершенно 
неправильное место в лабиринте или даже вне лабиринта вообще. 


Здесь проблема состоит в том, что Јауа$Ѕсгірї полагает, что мы хотим соединить две 
текстовые строки, а не сложить два числа. Чтобы решить эту проблему, нам нужно 
дать ЈауаЅсгірі знать, что мы хотим выполнить математическую операцию сложе- 
ния, а не конкатенацию текста. Это можно сделать несколькими способами, но 
лучшим будет функция мотрех (): 


х = Мопрег (1оса15іогаде ["тахебаме сиккеп®Х"]); 


// Теперь Јауаѕсгірі вычисляет 35+10 правильно и возвращает 45. 
х += 10; 


Текст и числа легко поддаются обработке, но при сохранении в веб-хранилище 
других типов данных следует соблюдать осторожность. Для некоторых типов дан- 
ных существуют удобные процедуры преобразования. Но допустим, например, что 
мы сохранили следующую дату: 


уаг бодау = пем раїе (); 


Этот код сохраняет не объект даты, а текстовую строку, например 5аЕ Јоп 09 2011 
13:30:46. К сожалению, не существует легкого способа ДЛЯ преобразования этого 
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текста обратно в объект даты при извлечении его из хранилища. А если у нас нет 
объекта даты, мы не сможем манипулировать этой датой, как и ее исходным объек- 
том, например вызывать его методы и выполнять вычисления. 


Чтобы решить эту проблему, разработчик должен явно преобразовать дату в текст, 
а потом преобразовать извлеченный из хранилища текст обратно в правильный 
объект даты. Пример таких преобразований приводится в следующем коде: 


// Создаем новый объект даты. 
уаг бодау = пем раїе (); 


// Преобразуем дату в тестовую строку в формате ГГГГ/ММ/ДД 
// и сохраняем эту строку. 
зеѕззіопдіогаде ["зезз1оп ѕзіагіеа"] = ёодау.деёЕ011Үеаг () 
+ "/" + содау.деЕМопёћ () + "/" + годау.деЁраёѓе (); 


// Теперь извлекаем из хранилища строку даты и с ее помощью 
// создаем новый объект даты. 

// Это возможно благодаря распознаваемому формату текста даты. 
ёодау = пем Рафе (ѕзеззіопдіогаде ["зеѕзѕзіоп ѕёагёеа"]); 


// Теперь с этим объектом можно применять его методы. 
а1ег® (фоЯау.дчееРи11Уеаг()); 


В результате исполнения этого кода выводится окно сообщения, подтверждающее 
успешное восстановление объекта даты. 


Сохранение объектов 


В предыдущем разделе мы рассмотрели преобразование чисел и дат в текст для со- 
хранения в веб-хранилище и обратное преобразование данных, извлеченных из веб- 
хранилища. Выполнение этих преобразований доступно благодаря таким возмож- 
ностям языка Јауа$сгірі, как функция мопрег (), и преобразованиям, зашитым в объ- 
екты данных. Но существует большое количество других объектов, которые нельзя 
преобразовывать таким способом. Классическим примером таких объектов будет 
пользовательский объект. 


Возьмем, например, личностный тест, рассмотренный в разд. "Обобщая сказанное: 
рисуем график" главы 7. Этот тест выполняется на двух страницах. На первой стра- 
нице пользователь отвечает на вопросы и отправляет их для оценки. На второй 
странице отображаются результаты теста. В первоначальной версии этой страницы 
информация передается с первой страницы во вторую с помощью строковых пара- 
метров запроса, вставленных в ОВГ. Это традиционный НТМГ-подход (хотя мож- 
но также было бы использовать и сооКіеѕ). Но в НТМІ5 лучшим средством для об- 
мена данными является локальное хранилище. 


Но здесь есть определенная проблема. Данные теста состоят из пяти чисел, по 
одному для каждого личностного фактора. Каждое из этих чисел можно было бы 
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сохранить в виде отдельного элемента со своим ключом. Но разве не было бы более 
аккуратным и компактным создать пользовательский объект, содержащий всю 
личностную информацию В ОДНОМ пакете? Далее приведен пример пользователь- 
ского объекта Регзопа1ібуѕсоге, который как раз это и делает: 

Ғипсііоп Регѕопа1іїіубсоге (о, с, е, а, п) { 


$51$.ореппезз = о; 
ћіѕ.сопѕсіепііоџѕпезѕз = с; 


{51$.ехегауегз$1от = е; 
һіѕ.адгееар1іепеѕѕ = а; 
ЕҺіѕ.пецгоіісізт = п; 


} 


Использование объекта регѕопа1ібуѕсоге позволит нам обойтись всего лишь одной 
ячейкой веб-хранилища вместо пяти. (Чтобы освежить свои знания работы пользо- 
вательских объектов в Јауа$Ѕсгірі, см. разд. "Отслеживание нарисованного содер- 
жимого" главы 7.) 


Но чтобы сохранить пользовательский объект в веб-хранилище, нам нужно преоб- 
разовать его в текст. Это можно было бы сделать с помощью кода, что отвечало бы 
цели, но потребовало бы приложения больших усилий. К счастью, существует бо- 
лее простой, стандартный способ решения этой задачи, который называется коди- 
рованием ЈЅОМ (ТауаЗсирё ОЫјесі Моайоп, система обозначений объектов 
Јауа$сгір0). 


Облегченный формат Ј5ОМ№ преобразует структурированные данные — наподобие 
всех значений, обернутых в объект — в текст. Но лучшее в ЈЅОМ то, что его под- 
держка встроена в браузеры. Это означает, что мы можем преобразовать в текст 
любой объект ЈауаЅсгірі вместе с его данными простым вызовом метода 
ЈЅОМ.зігіподіғу(), а метод 7Ј50м.рагѕе () преобразует этот текст обратно в объект. 
Далее приведен код примера использования этих методов с объектом 
Регзопа11убсоге. Когда пользователь отправляет свои ответы, страница вычисляет 
результаты (код вычислений не показан), создает объект, сохраняет его, а потом 
открывает страницу результатов: 


// Создаем объект Регзопа11$у5соге. 
уаг зсоге = пем Регзопа11$узсоге (о, с, е, а, п); 


// Сохраняем этот объект в формате 9$0м. 
зеѕѕзіопдіоге ["регзопа11у5соге"] = 950М. з6 г1па1Еу (зсоге); 


// Переходим на страницу результатов. 
\1паом.1оса®1оп = "Регѕопа1ібуТеѕі Ѕсоге.һіті"; 


На странице результатов мы можем извлечь из хранилища текст ЈЅОМ и преобразо- 
вать его обратно в требуемый объект с помощью метода 750ч.рагѕе (). Далее при- 
веден пример кода для такого преобразования и отображения одного из результатов 
теста: 


// Преобразуем 950М-текст в соответствующий объект. 
уаг зсоге = ЈЅ0М.рагзе (1оса15іогаде ["регзопа11$убсоге"]); 
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// Извлекаем определенные данные из объекта. 


1515согеТоРо.1ппехНТМЬ = "Үоџг ехігауегѕіоп зсоге із " + 
зсоге.ехігауегѕіоп; 


Полностью код данного примера, включая вычисления каждого личностного фак- 
тора, можно просмотреть на сайте книги по адресу ћќёр://ууууу.ргоѕеќесһ.сот/ 
һеті15/. Узнать больше о системе обозначений ЈЅОМ и посмотреть, как выглядят 
данные, закодированные в системе обозначений ЈЅОМ, можно по адресам 
Һер://ги.уіКкіредіа.ого/уікі/ЈЅОМ или һќќр://еп.уікірейіа.ого/уікі/ЈЅОМ. 


Реагирование на изменения в хранилище 


Кроме рассмотренных применений, веб-хранилище предоставляет способ для об- 
щения между разными окнами браузера. Это возможно благодаря тому, что каждое 
изменение локального хранилища или хранилища сеансов активирует событие 
мтіпдом.опЅеогаде во всех других окнах, в которых просматривается та же страница 
или другая страница того же самого сайта. Таким образом, изменение локального 
хранилища для страницы үүү.СоаќѕСапЕоаё.ого/ѕіогеЅ (и. Мт] активирует со- 
бытие опѕёогаде в окне браузера для страницы жжү.СоаѕСапЕоаї.ого/ 
свескюгазе.В и. (Конечно же, страницы должны просматриваться в том же 
браузере и на том же компьютере, но вы это уже и так знали, не так ли?) 


Событие опѕіогаде активируется при добавлении объекта в хранилище, изменении 
объекта, находящегося в хранилище, удалении объекта из хранилища или полной 
очистке хранилища. Событие не активируется, если код выполняет операцию с 
хранилищем, которая не имеет никакого эффекта (например, сохранение значения, 
которое уже находится в хранилище, или очистка пустого хранилища). 


Рассмотрим, например, страницы на рис. 9.4. Здесь в хранилище можно добавить 
любое значение с любым ключом, заполнив соответствующие текстовые поля и 
нажав кнопку Ааа. Добавленное значение отображается на другой, уже открытой 
странице. 


Чтобы создать пример, показанный на рис. 9.4, сначала нужно создать страницу, на 
которой выполняется ввод и сохранение данных. Данные сохраняются функцией 
ааауаілпе (), которая активируется нажатием кнопки Ааа и выглядит так: 

Ғопсёіоп ааЯУа1ае() { 


// Получаем значения из обоих текстовых полей. 


уаг Кеу = Ӣосотепі .деёЕ1ІетепЕВута ("кеу") .уа1ае; 


уаг іёбет = Чосимеп®.сееЕ1етеп®ВуТа ("16ет") .уа1џе; 


// Сохраняем элемент в локальном хранилище. 


// (Если ключ уже существует, новый элемент заменяет старый.) 
Іоса15іогаде [кеу] = іёет; 
} 


Вторая страница тоже не представляет ничего сложного. При загрузке страницы 
событию м1паом. оп5іогаде присваивается функция с помощью следующего кода: 
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м1паом.оп1оаа = Ғопсёіоп() { 
// Подключаем событие опбфогаде к функции зіогадеСһа 
м1раом . адаЕуепі1ізёепег ("ѕзіогаде", зіогадеСһапдеа, Е 


}; 


паеа(). 
а1зе); 


[3 Уюгаде Емепїіѕ \ Г) Ѕогаде Емепіѕ 9р 


< С! О 1осаіћоѕі/ЅїогадеЕуепїѕ1.һіті 
ТосСАІ ЅТОВАСЕ 


Кеу:  гапдотТех 


\Уаше: |Сап апубобу ее геад 115? 


[5 Ѕіогаде Еуепіѕ ’ [3 Ѕғогаде Емепіѕ 


К> С © Іосаіһоѕ/та 


Уо 


Госа $4огабе ир4а{е4. 

Кеу: гапіаотТехі 

Оа Уаше: пи] 

М ему Уаше: Сап апубойу е1ѕе геай 1615? 


ОВГ: Һр:/ЛосаІћоѕ{/оапіќеѕ{/ЅіогавеЕуепіѕ1.Һіті 


Рис. 9.4. Чтобы увидеть действие события оп5іогаде, откройте 


файлы ЅіогадеЕмепіќѕ1.һті 


и ЗюгадеЕумет{$2.пт!. При добавлении или изменении значения на первой странице (вверху) 
вторая страница улавливает это событие и отображает соответствующие данные 


Этот код выглядит несколько иначе, чем код для обработки событий, с которым мы 


сталкивались до сих пор. Вместо установки события міл 


доу .опбіогаде он вызывает 


функцию міпаои . аааЕуепё1ізіепег (). Это сделано для того, чтобы Код работал на 
всех современных браузерах. Если активировать событие и1пдом.оп$Еохаде напря- 
мую, код будет работать на всех браузерах, за исключением Еігеѓох. 


ПРИМЕЧАНИЕ 


Старожилы Интернета, наверное, помнят, что метод ааа! 
на версиях Іпіегпеї Ехріогег 8 и более ранних. В данном 


Еуепе1іѕёепег () не работает 
примере это ограничение не- 


существенно, т. к. Е 8 не поддерживает события хранилища в любом случае. 


Функция зёогадеСһапдеа() выполняет простую задачу. Она берет обновленную ин- 


формацию и выводит ее на странице в элементе <аіу>: 
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Ғипсііоп зёогасдеСһапдеа (е) { 
уаг пеѕѕаде = аоситмепе.дчеЕ1етеп®ВуТа ("ирааёеМеѕзаде") ; 
пеѕзаде.іппегнНтТмі = "Іоса1 зіогаде ордабеа."; 
пеѕзаде.іппегнНтТмі += "<рг>Кеу: " + е.Кеу; 
пеѕзаде.іппегнтТмі += "<рг>о1Іа Уа1ае: " + е.о1аУа1ае; 
пеѕзаде.іппегнНтТмі += "<ру>Мем Уа1ае: " + е.пемУа1ае; 
пеззаае .1ппехНТМЬ += "<Ьх>ОВЬ: " + е.п:1; 


} 


Как видно, событие опѕіогасе предоставляет несколько единиц информации, в том 
числе ключ измененного значения, старое значение, новое значение и ОКІ страни- 
цы, на которой изменение было выполнено. Если событие опѕсогаде активировано 
вставкой нового элемента, значение свойства е.о19\а1е равно либо по11 (в боль- 
шинстве браузеров), либо пустой строке (в Пуегпей ЕхріІогег). 


ПРИМЕЧАНИЕ 


Если открыто несколько страниц одного и того же веб-сайта, событие опѕіогаде ак- 
тивируется в каждой из этих страниц, за исключением страницы, на которой было 
осуществлено изменение (в данном примере это будет страница ЗюгадеЕует$1.П"т|). 
Но, как всегда, Іпїегпеї Ехр!огег не следует этому правилу и активирует событие 
опѕіогаде и на странице, выполняющей изменения. 


Чтение файлов 


Возможность веб-хранилища поддерживается в НТМІ 5 на хорошем уровне. Но это 
не единственный способ получения информации веб-страницами. В эту область 
понемногу вводится несколько других стандартов, направленных на выполнение 
разных типов задач хранения данных. Одним из таких стандартов является Ее АРІ, 
который технически не входит в НТМГ5, но имеет хороший уровень поддержки на 
всех современных браузерах (за исключением Нуегпе{ ЕхріІогег). 


Судя расплывчатому названию этого стандарта, может показаться, что это всеохва- 
тывающий стандарт для чтения и записи файлов на жесткий диск клиента. Но этот 
стандарт не настолько амбициозный или мощный. Он просто разрешает посетите- 
лю веб-сайта выбрать файл на своем жестком диске и передать его непосредствен- 
но коду Лауабспрь исполняющемуся на просматриваемой веб-странице. Код может 
открыть этот файл и работать с его данными, будто это простой текст или что-то 
более сложное. Здесь ключевым аспектом является то обстоятельство, что файл 
передается непосредственно коду ЈауаЅсгірі. В отличие от обычной выгрузки фай- 
ла, он никогда не отправляется на веб-сервер. 


Также важно знать, что Ее АРІ не может делать. Самое важное, что он не может 
изменять файлы или создавать новые файлы. Чтобы сохранить какие-либо данные, 
нужно прибегать к другому механизму, например данные можно отправить на веб- 
сервер посредством запроса хмгнеЕрвеачиезе (см. разд. "Объект ХМЕНирКециея" 
главы 11) или же поместить их в локальное хранилище. 
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Судя по этому, можно подумать, что интерфейс Ее АРІ менее полезен, чем ло- 
кальное хранилище, и для большинства веб-сайтов это будет правильный вывод. 
Но этот стандарт приоткрывает дверь в область, в которую НТМЕ раньше не вхо- 
дил, по крайней мере без помощи модулей расширений. 


ПРИМЕЧАНИЕ 


В настоящее время интерфейс Ее АР! является необходимой функциональностью 
для определенных типов специализированных приложений, но в будущем его воз- 
можности могут быть расширены, и важность его значительно возрастет. Например, 
будущие версии интерфейса могут позволять веб-страницам сохранять файлы на же- 
сткий диск клиента при условии, что пользователь контролирует имя файла и место 
его сохранения, используя диалоговое окно Сохранить как. Модули расширения, на- 
подобие ЕІаѕћ, уже оснащены такой способностью. 


Получение файла 


Прежде чем интерфейс Ее АРІ сможет что-либо сделать с файлом, ему нужно этот 
файл получить. Эту задачу можно выполнить тремя разными способами, но все они 
одинаковые в одном ключевом аспекте — веб-страница может получить файл толь- 
ко в том случае, если посетитель явно выберет и предоставит его веб-странице. 


Способы получения файла следующие. 


С Посредством элемента <іприё>. Присвоив атрибуту суре значение ғілІе, мы по- 
лучим стандартное окно для закачивания файла. Но с помощью небольшого 
сценария Јауа$сгірі и ЕПе АРІ этот файл можно открыть локально. 


О Посредством скрытого элемента <іприё>. Элемент <іпроє> очень непривлека- 
тельный. Чтобы не обезображивать им свою страницу, его можно скрыть и соз- 
дать более прилично выглядящую кнопку. Нажатие этой кнопки активирует 
Јауа$сгірі-код, вызывающий метод сііск() скрытого элемента <іпроє>, который 
открывает стандартное диалоговое окно выбора файла. 


П Посредством метода гас апа ігор. Если браузер поддерживает этот метод, 
файл можно перетащить с рабочего стола или окна браузера и отпустить его в 
определенной области веб-страницы. 


В последующих разделах мы рассмотрим все это подходы более подробно. Но сна- 
чала стоит узнать, как обстоят дела с современной поддержкой браузерами интер- 
фейса Ее АРІ, чтобы вы могли определиться, имеет ли смысл применять этот ин- 
терфейс на своем веб-сайте. 


Поддержка браузерами интерфейса ЕіІе АРІ 


Интерфейс ЕПе АРІ не имеет такой широкой поддержки, как веб-хранилище. Теку- 
щая браузерная поддержка этого интерфейса приводится в табл. 9.2. 


Все примеры в этой главе могут исполняться на версиях браузеров, перечисленных 
в табл. 9.2. Но эти браузеры почти наверняка не реализуют все возможности Ее 
АРІ, т. к. некоторые части стандарта (для работы с большими объемами двоичных 
данных и "вырезания" порций данных) все еще находятся в процессе разработки. 
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Таблица 9.2. Поддержка браузерами интерфейса Ейе АРІ 


Минимальная 10* 3.6 11.1 З 
версия 


* На момент написания этой книги доступны только ранние бета-сборки этой версии. 


Так как для Е1е АРІ требуются определенные полномочия, которыми обычные веб- 
страницы не обладают, отсутствующие возможности нельзя заменить дополни- 
тельными сценариями ЈауаЅстірі. Вместо этого нужно применять модули расшире- 
ния, такие как ЕІаѕһ или ЭПуег +. Например, на странице ћќёр://ѕапдБох.Кпагіу. 
сот/јѕ/агореѕ можно найти заполнитель (роуйП), использующий модуль 
5Пуегіећ, чтобы перехватить перетаскиваемый файл, а потом передать информа- 
цию о нем коду Јауа$стірї на странице. 


Чтение текстового файла 


Самой простой операцией Ее АРІ будет чтение содержимого простого текстового 
файла. На рис. 9.5 показана веб-страница, которая с помощью этого интерфейса 
считывает разметку веб-страницы, а потом выводит этот текст в окне браузера. 


сја 
| О веза Тех + | Е 
<) |] ћр:/Лосаіһоѕ/тапіќеѕ/КеаатТех.Һті - аа: м 
— = 2. 


САНТМІ5\СһаріегОТ\НТМІ5Тетріаіе.Мті 


<ІрОСТҮРЕ һапі> < Іапс="еп"'> <феа4> <теќа сһагѕе="и-8"> 
<Н4е>А Тпу НТМІ Росшпепі</!е> <!-- Мое ћаї ће ҒоЙоууіпо Шез 
оп" ехіѕі Тһеу'те ог детопѕітабоп ригрозез ошу. --> < 
ЬгеЁ="ѕіуіеѕ.сѕ5" геі="ѕіуЇеѕһееі"> <ѕсгірі ѕгс="ѕстіріѕ. јѕ"></ѕспрё> 


<Леа4> <Фоду> <р>Ге! $ госк ће Бгоуѕетг, НТМІ5 ѕіуіе </р> 
<Лоду> <Љаші> 


Рис. 9.5. Нажмите кнопку Вгомѕе (или Выбрать файл в Сһготе), укажите требуемый файл 
и нажмите кнопку ОК. Вместо обычной закачки файла, последующая обработка выполняется 
кодом Јауа$сгірї веб-страницы, который вставляет содержимое в страницу 


Создание этого примера начинается с элемента <іприё +уре="ғіІе">, который соз- 
дает текстовое поле и кнопку Вгоуѕе (Обзор): 


<іпроі іа="#1і1е1приё" фуре="Е11е" опсрапае="ргосеззЕ11ез (Еһіѕ.Ёі1еѕ) "> 
Но в то время как элемент <іприї> обычно вставляется в контейнер <Ғогт>, чтобы 


файл можно было закачать на веб-сервер, в данном случае наш элемент <іпроё> 
играет самостоятельную роль. Когда посетитель страницы выбирает файл, активи- 
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руется событие опсћһапое элемента <іприо+>, что в свою очередь активирует функцию 
ргосеззЕ11ез(). Как раз на этом этапе и открывается файл посредством самого 
обыкновенного кода Јауа$сгірі. 


Теперь рассмотрим по частям функцию ргосез$Е11ез(). Сперва нам нужно взять 
первый файл из коллекции файлов, предоставленных элементом <іприє>. А если 
только явно не разрешить выбор нескольких файлов (посредством атрибута 
пи161р1е), коллекция файлов будет гарантированно содержать только один файл, 
размещенный в элементе 0 массива файлов: 


Ғипсііоп ргосеззЕ11ез (Е11ез) { 
уаг Е11е = Ё11ез [0]; 


ПРИМЕЧАНИЕ 


Все объекты файлов обладают тремя потенциально полезными свойствами. Свойство 
пате сообщает нам имя файла (без пути), свойство 51=е указывает размер файла в 
байтах, а свойство суре информирует о ММЕ-типе файла (см. врезку "На профес- 
сиональном уровне. Основные сведения о МІМЕ-типах" главы 5), если его можно оп- 
ределить. Эти свойства можно считывать и использовать их в дополнительной логике, 
например, отказаться обрабатывать файлы больше определенного размера или раз- 
решить обрабатывать файлы только определенного типа. 


Далее создается объект Е11еВеааек для обработки файла: 


уаг геааег = пем Е11еВеааег (); 


Теперь мы почти готовы вызвать один из методов объекта ғі1еКеадег, чтобы из- 
влечь содержимое файла. Но эти методы являются асинхронными. Это означает, 
что они начинают чтение файла, но не ожидают получения данных. Поэтому, что- 
бы получить данные, сначала нужно обработать событие опгоаа: 

геааег.опіоаа = ЕапсЕ1оп (е) { 


// Когда это событие активируется, данные готовые. 


// Вставляем их в страницу в элемент <аіу>. 


уаг оџіри = аосимепе. че Е1етептеВуТа ("#і1еОџёриё"); 


оціриоё.бехЕСопіепі = е.іагдеї.геѕиіі; 
}; 
Наконец, подготовив этот обработчик события, можно вызывать метод 
геаадѕтехі () объекта Е11евеадег: 


геааег.геаадѕтТехі (Е11е); 
} 


Этот метод сбрасывает все содержимое файла в одну длинную строку, вставляемую 
В СВОЙСТВО е.тагдеф .гези1*, которое в свою очередь отправляется событию опгоаа. 


Метод геадАзТех® () работает должным образом только для текстового содержимо- 
го файла, но не для двоичного. Это означает, что он идеально подходит для работы 
с файлами НТМЕ, как показано на рис. 9.5. Но простой текст применяется также в 
файлах других полезных форматов. Одним из таких форматов является формат 
СЗУ — основной формат экспортирования, поддерживаемый всеми программами 
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электронных таблиц. Другим примером будет формат ХМГ, который является 
стандартным способом обмена данными между программами. (Этот формат также 
лежит в основе форматов ХМГ, ОЁбсе, что означает, что 4осх- и х[зх-файлы можно 
также передавать напрямую методу геадАзТехе ().) 


ПРИМЕЧАНИЕ 


Язык Уауа$спйр{ имеет встроенный синтаксический анализатор ХМЕ, что позволяет 
просматривать файлы ХМЁЕ и выбирать из них только требуемое содержимое. Конечно 
же, для осуществления этой задачи нужно создать код внушительного объема, кото- 
рый плохо работает с большими файлами. К тому же, в редких случаях применение 
этого кода будет более легким, чем просто загрузка файла на веб-сервер и выполне- 
ние обработки там. Но это позволяет продемонстрировать новые возможности, откры- 
ваемые интерфейсом ЕіІе АРІ, которые фанаты НТМЁ даже не осмеливались предста- 
вить себе всего лишь несколько лет тому назад. 


Кроме метода геаадѕтТехі (), объект Кі1еКЕадег имеет еще несколько других методов 
для чтения файлов: геаадѕВіпагуѕігіпа (), геаадзѕраёау0ві () И геаадѕАггауВи ег (), 
Но последний метод не поддерживается в Еїгеѓох. 


Метод геайдѕВвіпагу () предоставляет веб-приложению возможность считывать дво- 
ичные данные, хотя он вставляет эти данные в текстовую строку несколько неук- 
люже, что не является особенно эффективным. А если вы еще захотите разобраться 
с этими данными, то для этого вам придется мучиться с исключительно запутан- 
ным кодом. Лучшая поддержка планируется для возможности "вырезания" не- 
больших фрагментов двоичных данных, чтобы их можно обрабатывать по одному 
фрагменту за раз. Но на момент написания этих строк эта возможность все еще со- 
вершенствуется и реализована по-разному в различных браузерах. С последней 
версией стандарта можно ознакомиться здесь: уүү.үЗ.огеТК/ЕеАРІ. 


Метод геадАѕрабауві () предоставляет легкий способ захватывать данные изобра- 
жения. Мы рассмотрим применение этого метода в разд. "Чтение файла изобра- 
жения" далее в этой главе. Но сначала мы выясним, как сделать нашу страницу 
более красивой. 


Замена элемента <іприѓё> 


Веб-разработчики сходятся во мнении: стандартный элемент управления <іприё>, 
применяемый для выгрузки файлов, выглядит далеко не лучшим образом. Но хотя 
нам не избежать использования его, совсем необязательно, чтобы пользователи его 
видели. Мы можем просто скрыть его с помощью следующего стилевого правила: 


+Е11еТирие { 
аіѕрІау: попе; 


} 


Теперь нам нужно добавить новый элемент управления, который будет иницииро- 
вать процесс предоставления файла. Для этого достаточно обычной кнопки со 
ссылкой, которую мы можем разукрасить каким угодно образом: 


<Баебоп опс11ск="зВомЕ11еТприе () ">Апа1угте а Еі1е</роёёоп> 
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Последним шагом будет обработка нажатия кнопки путем инициализации вручную 
элемента <1про=> через вызов метода с11ск() этого элемента: 


Ғипсііоп зВомР11еТприе() { 
уаг Е11еТприе = доситепі .деёЕ1епепіВутІа ("Е11еТприе"); 


Ғі1еІприё.с1іск(); 
} 


Теперь нажатие этой кнопки запускает функцию зЬомЕ11етприе (), которая "нажи- 
мает" скрытую кнопку Вгоуѕе и отображает диалоговое окно для выбора файла. 
Это, в свою очередь, активирует событие опсһапое скрытого элемента <1прае>, ко- 
торое запускает функцию ргосеѕѕғі1еѕ () точно таким же образом, как и раньше. 


Одновременное считывание нескольких файлов 


Нет никаких причин ограничивать количество файлов, предоставляемых пользова- 
телем. Стандарт НТМІ5 разрешает предоставлять для считывания несколько фай- 
лов, но это нужно явно указать, вставив атрибут пол Е+р1е в элемент <іприё>: 


<1прие 14="Е11е1 пра" ёуре="Ғі1е" опсрапае="ргосеззЕ11е$ (Е61$.Е11е5)" 
пи161р1е> 


Теперь в диалоговом окне открытия файла пользователь может выбрать несколько 
файлов (например, удерживая нажатой клавишу <Сіг1> и указывая требуемые фай- 
лы или же очертив их при нажатой левой кнопки мыши). Но, разрешив предостав- 
ление нескольких файлов, нам нужно и обработать их должным образом. Это озна- 
чает, что мы не можем просто взять первый файл из коллекции, как мы делали 
в предыдущем примере. Нам нужен цикл ғо, который обрабатывает все файлы по 
одному за каждый проход цикла: 

Ғог (уаг 1=0; 1<Е11ез.1епаеВ; 1++) { 


// Получаем следующий файл. 
уаг Е11е = Ё11е5[1]; 


// Создаем объект Е11]еВеадег для этого файла и исполняем обычный код. 


уаг геааег = пеи Еі1еВеааег (); 


геааег.оп1оаа = РапсЕ1оп (е) { 


}; 
геааег.геаадѕтТехі (#11е); 


Чтение файла изображения 


Как мы узнали, объект ғі1еВеайег обрабатывает текстовое содержимое в один про- 
стой прием. Благодаря методу геадлѕра+аџкі (), он с такой же легкостью обрабаты- 
вает и изображения. 


На рис. 9.6 показан пример, для реализации которого используются две новые воз- 
можности: поддержка изображений и выбор файла методом агар апа агор. 
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Рис. 9.6. На этой странице изображение можно представить двумя способами: 
выбрать файл изображения с помощью элементов управления внизу или перетащить 
и отпустить нужный файл в выделенную пунктиром рамку 


Выбранное изображение используется в качестве фона элемента, хотя его с тем же 
успехом можно было вставить в холст и обрабатывать попиксельно в холсте 
(см. разд. "Проверка на столкновение с использованием цвета пикселов" главы 7). 
Этот метод можно применить, например, чтобы создать страницу, на которую 
посетитель может вставить изображение, доступное для редактирования, а затем 
сохранить конечный результат посредством вызова объекта хмінєєркедџеѕё 
(см. разд. "Объект ХМІ.НіирКециеѕі" главы 11). 


При создании такой страницы сначала нужно решить, какой элемент будет полу- 
чать перетаскиваемые файлы. В нашем примере это <аіу>-элемент ахорВох: 


<аіу іа="дгорВох"> 
<аіу>ргор уоџг ітаде Һһеге...</4іу> 
</аіу> 


С помощью правил таблицы стилей задаем полю для перетаскивания файла желае- 
мый размер и оформляем рамкой и фоном: 


#агорВох { 
пагдіп: 15рх; 
міаєһ: 300рх; 
Һеісһі: 300рх; 
рогаег: 5рх ааѕћеа дгау; 
Богаег-хаЯ1яаз: 8рх; 
Баскагоипа: 1Іідћһіуе11оми; 
раскагоџпа-ѕіхле: 100%; 
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раскагоџпа-гереаё: по-гереаїі; 
Бехі-а1ідп: сепіег; 


#агорВох іу { 


пагдіп: 100рх 70рх; 
со10ог: огапае; 
ЕорЕ-$17е: 25рх; 


ЕорЕ-Еаш11у: УегЧапа, Агіа1, запз-зет1Е; 


} 


Возможно, вы заметили, что в поле для перетаскивания файла изображения уста- 
новлены свойства раскагоџпа-ѕіле И раскакоппа-гереае для подготовки к следую- 
щей операции. Когда файл изображения перетаскивается в поле <а1у>, то изобра- 
жение используется в качестве фона этого элемента. Свойство раскагоџпа-ѕіхле 
обеспечивает уменьшение размеров изображения, чтобы его можно было видеть 
полностью. А значение по-гереаї свойства раскогоџпа-гереаі обеспечивает, что 
изображение не повторяется для замащивания оставшегося пространства. 


Для обработки перетаскивания и отпускания файла нам требуются три события: 
опргадЕпёег, опргадбуег И опргор. При загрузке страницы ко всем этим событиям 
подключается соответствующий обработчик: 


уаг агорВох ; 


міпаои.оп1оаа = Ёопсііоп () { 


агорВох = Яйосоипепі .деіЕ1етепіВута ("агорВох"); 


агорВох.опагадепёег = ісдпогергад; 
агорВох.опагадоуег = ісдпогергад; 
агорВох.опӣгор = Ягор; 

}; 


Функция іспогергад() обрабатывает как событие опртадЕпеех (которое инициали- 
зируется, когда указатель мыши с перетаскиваемым файлом входит в зону сбрасы- 
вания), так и событие опргадОуек (которое срабатывает постоянно во время движе- 
ния курсора мыши в зоне сбрасывания). Такой подход возможен потому, что нам 
никак не нужно реагировать на эти действия, кроме как сообщить браузеру не 
предпринимать никаких действий. Код функции выглядит следующим образом: 


Ғипсііоп ідпогергад (е) { 
// Обеспечиваем, чтобы никто другой не получил это событие, 
// т. к. мы выполняем операцию перетаскивания. 
е.зіорРгорадаііоп (); 
е.ргеуепёреҒаоіё (); 


} 


Событие опргор более важное, т. к. в нем мы получаем файл и обрабатываем его. 
Но поскольку файл для страницы можно предоставить двумя способами, собствен- 
но для выполнения работы функция агор () вызывает функцию ргосеззЕ11ез (): 
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Ғипсііоп @гор(е) { 
// Аннулируем это событие для всех других. 
е.зіорРгорадаііоп (); 
е.ргеуепёреҒаоіё (); 


// Получаем перемещенные файлы. 


уаг даа = е.дӢаїатТгапѕѓег; 
уаг Е11ез = ааба.Е11ез; 


// Передаем полученный файл функции для обработки файлов. 
ргосезз Е11ез (Ғі1еѕ); 


} 
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Функция ргосез$Е11ез() является последним этапом в процессе перетаскивания 
файла. Она создает объект ғі1іекеадег, подключает функцию обработки к событию 
оп1оаа и вызывает метод геадАзРата0вт() для преобразования данных изображения 
в данные ОКТ, (см. разд. "Сохранение содержимого холста" главы 6): 


Ғипсііоп ргосеззЕ11ез (Е11ез) { 
уаг Е11е = ЁҒі1еѕ[0]; 


// Создаем объект Е11еВеадег. 


уаг геааег = пеи Еі1еВеааег (); 


// Указываем объекту, что делать, когда ОКІ данных готов. 
геадег.оп1іоаа = Ёџпсііоп (е) { 
// Используем ОКІ изображения для заполнения фона 


// зоны сбрасывания файла изображения. 


агорВох . ѕёу1Іе.раскагоцпаїІтаде = "игі ('" + е.фахгдее.гезо1е + "')"; 


}; 


// Начинаем считывать изображение. 
геааег.геаадѕраёарві (#і1е) ; 


ПРИМЕЧАНИЕ 


Как мы узнали в процессе изучения холста, ЦВЕ данных — это способ представления 
данных изображения в виде длинной текстовой строки, которую можно использовать 
как УВЕ. Это позволяет нам перемещать данные изображения из одного места в дру- 
гое. Чтобы показать изображение на веб-странице, УВЕ данных изображения при- 


сваивается как значение свойству згс элемента <іта> (см. разд. 
жимого холста" главы 6) или же как значение С$$-свойства рас 
делается в этом примере). 


"Сохранение содер- 
кагоипа-1таде (как 


Объект Е11еВеадек имеет еще несколько других событий, которые можно использо- 
вать при чтении файлов изображений. Событие опргодгеѕз срабатывает периодиче- 
ски в процессе длинных операций, чтобы предоставить информацию об объеме за- 
груженных данных на текущий момент. (Операцию можно аннулировать до ее за- 


вершения, вызвав метод ароге () объекта Е11еВеадех.) Событие оп! 


кххог срабатывает 


в случае проблем с открытием или чтением файла. А событие оп 


юааЕпа — при за- 
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вершении операции любым способом, включая ее преждевременное завершение 
вследствие ошибки. 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
В мире баз данных 
Вы жаждете более мощной возможности локального хранения данных? Если веб- 


хранилище (текстовые строки) и Ейе АР! (простые файлы) вам больше неинтересны, 
то как насчет полной, миниатюрной базы данных, работающей прямо в браузере? 


Эта амбициозная идея не является необоснованной мечтой и уже была однажды реа- 
лизована в браузерах Сһготе и Ѕаѓагі в соответствии со стандартом \№\еБ Оаїабаѕеѕ. 
Но для разработчиков браузера Еігеїох этот стандарт не был достаточно убедитель- 
ным, и теперь он считается устаревшим. Вместо него сейчас используется стандарт 
Іпдехеарв, который, скорее всего, реализуют все разработчики браузеров. Ознако- 
миться с этим стандартом можно в документации Ёігеїох по адресу НЧр:/ 
дехеІорег.то2а.огд/еп/1паехеарв или же испробовать экспериментальный прото- 
тип для Іпіегпеї Ехрогег 9, который можно загрузить отсюда: ИЧр:/Атуин.сот/ 
Зїиүи99. 


ГЛАВА 10 


Автономные приложения 


Чтобы просматривать веб-сайт, нужно подключиться к Интернету. На сегодняшний 
день все это знают. Так зачем же тогда нужно рассматривать автономные приложе- 
ния? Как будто мы собираемся вернуться прошлое столетие. В конце концов, разве 
на своем пути к мировому господству веб-приложения не сбросили владычество 
нескольких поколений автономных настольных приложений? Осуществление мно- 
жества разнообразных задач — от записей в социальной сети до покупки книг 
в интернет-магазине — просто невозможно без подключения к Интернету. Но не 
стоит забывать, что даже веб-приложения не предназначены для обязательного по- 
стоянного пребывания в Сети. В них заложена возможность продолжать работу 
в периоды временного отсутствия подключения к Интернету. Иными словами, ав- 
тономное веб-приложение допускает временные сетевые отказы. 


Это обстоятельство имеет особо важное значение для посетителей, пользующихся 
для доступа к сети портативными устройствами, такими как смартфоны и план- 
шетные компьютеры с возможностью веб-доступа. Чтобы понять суть данной про- 
блемы, представьте себе, что вы работаете с веб-приложением на одном из таких 
устройств, находясь в поезде, и в это время поезд въезжает в туннель. Шансы вели- 
ки, что ваше веб-приложение выдаст сообщение о неисправимом сбое и вам при- 
дется начать все заново, когда поезд выедет из туннеля и восстановится подключе- 
ние к Интернету. А вот автономное веб-приложение позволит избежать такого не- 
благоприятного развития событий. Хотя некоторые возможности могут стать 
временно недоступными, приложение в основном останется работоспособным. 
(Опять же, некоторые туннели длиннее других. Амбициозное автономное прило- 
жение может продолжать работу на протяжении трехчасового авиарейса или трех- 
недельного путешествия по Африке, если это то, что вам нужно. По сути, время 
нахождения в автономном режиме ничем не ограничено.) 


В этой главе мы узнаем, как любую веб-страницу (или группу веб-страниц) можно 
преобразовать в автономное приложение. Также мы рассмотрим, как определить, 
когда веб-сервер является доступным, а когда нет, и реагировать соответствующим 
образом. 
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ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Когда работа в автономном режиме оправдана? 


Следует ли мне снабдить свою страницу возможностью работы 

в автономном режиме? 

Автономный режим работы не подходит для всех без разбору типов веб-страниц. На- 
пример, по большому счету нет смысла предоставлять автономные возможности для 
страницы биржевых котировок, т. к. вся суть такой страницы состоит в получении све- 
жих биржевых котировок с веб-сервера. Но возможность работы в автономном режи- 
ме может подойти для страницы для анализа акций, которая загружает партию дан- 
ных, а потом предоставляет возможность анализировать их и строить по ним графики. 
С такой страницей можно загрузить партию данных, пока существует интернет- 
подключение, а потом обрабатывать их, не беспокоясь, есть оно или нет. 


Автономный режим работы также подходит для интерактивных приложений, хранящих 
состояние, которые задействуют страницы кода Јаха5$сгірі для сохранения в памяти 
информации о своем состоянии. Такие страницы выполняют большой объем работы 
самостоятельно, поэтому лучше оснастить их возможностью работы в автономном 
режиме. Кроме этого, стоимость потери подключения к таким страницам также выше, 
т. к. это может случиться во время сложных и длительных вычислений, которые при- 
дется выполнять снова после восстановления подключения. 


Другим фактором, который нужно принять во внимание, являются посетители вашего 
сайта. Работа в автономном режиме нужна, если среди ваших посетителей есть такие, 
у которых нет надежного подключения к Интернету или которым требуется мобильное 
подключение (например, если вы создаете картографический инструмент для мобиль- 
ных устройств). 


Однако нужно быть готовым и к тому, что организация работы в автономном режиме 
окажется несоизмеримой с затраченными на ее реализацию усилиями. 


Кэширование файлов 
с помощью манифеста 


Основным техническим приемом, который делает автономный режим работы Ввоз- 
можным, является кэширование — загрузка файла С веб-сервера и сохранение его 
копии на жестком диске клиента. Таким образом, при потере интернет- 
подключения браузер сможет использовать копию страницы, сохраненную в кэше. 


Для создания страницы с возможностью работы в автономном режиме нужно вы- 
полнить следующие три шага: 


1. Создать файл манифеста. Манифест — это специальный файл, в котором хра- 
нится информация, указывающая браузерам, какие файлы следует сохранять, 
какие не сохранять, а какие файлы заменять каким-либо другим содержимым. 
Этот пакет кэшируемого содержимого называется автономным приложением 
(о ше аррісайоп). 


2. Модифицировать веб-страницу, чтобы она обращалась к манифесту. Таким об- 
разом, браузер будет знать, что при запросе страницы нужно загрузить файл ма- 
нифеста. 


3. Настроить веб-сервер. Самое важное — веб-сервер должен предоставлять файл 
манифеста с правильным МІМЕ-типом. Но, как мы увидим далее, есть еще не- 
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сколько тонких аспектов, которые могут отрицательно повлиять на кэширование 
страницы. 


Способы решения всех этих задач мы рассмотрим в последующих разделах. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Традиционное кэширование и автономные приложения 


В области веб-разработки кэширование не представляет собой ничего нового. Брау- 
зеры регулярно кэшируют содержимое, чтобы не загружать повторно одни и те же 
файлы. В конце концов, если несколько страниц веб-сайта используют один и тот же 
файл таблицы стилей, зачем загружать его для каждой страницы? Но механизм 
управления этим типом кэширования отличается от механизма работы автономных 
приложений. 


Традиционное кэширование выполняется, когда вместе с запрошенным браузером 
файлом веб-сервер отправляет дополнительную информацию, которая называется 
заголовком Саспе-СопНо|. Эти заголовки предоставляют браузеру информацию о том, 
следует ли кэшировать данный файл и на протяжении какого времени использовать 
кэшированную копию, прежде чем запрашивать у веб-сервера, не изменился ли этот 
файл. Обычно, кэшированная копия содержимого веб-страниц хранится короткое вре- 
мя; намного дольше хранятся кэшированные копии ресурсов, используемых веб- 
страницами, таких как таблицы стилей, изображения и файлы сценариев. 


В противовес, автономное приложение управляется отдельным файлом — манифе- 
стом, и длительность его хранения не управляется временными лимитами. Вместо 
временных лимитов используется следующее правило: если веб-страница является 
частью автономного приложения, если имеется кэшированная копия этого приложения 
и если определение этого приложения не претерпело никаких изменений, тогда ис- 
пользуется кэшированная копия. 


Веб-разработчик может добавить к этому правилу определенные исключения и до- 
полнения, например, указать браузеру не кэшировать определенные файлы или за- 
менить один файл каким-либо другим. Но ему нет надобности заботиться о сроках 
хранения и других, потенциально проблематичных подробностях. 


Создание манифеста 


Манифест является центральной частью предоставления автономной работы 
НТМІ5. Это текстовый файл, содержащий список файлов, которые нужно кэширо- 
вать. 


Файл манифеста всегда начинается словами (прописными буквами): 


САСНЕ  МАМТЕЕЗТ 


После этого заголовка следует список файлов, которые нужно кэшировать. Далее 
приведен пример файла манифеста для кэширования двух веб-страниц (из прило- 
жения личностного теста в разд. "Обобщая сказанное: рисуем график" главы 7): 


САСНЕ  МАМТЕЕЗТ 


Регзопа1ііёуТеѕі .Һіт1 


Регзопа1ііуТеѕі Ѕсоге.Һті 


Интервалы (как пустая строка в приведенном примере манифеста) не обязательны, 
можете вставлять их в любом месте. 
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Для автономного приложения браузер должен кэшировать все, что может потребо- 
ваться этому приложению: веб-страницы и ресурсы, используемые этими веб- 
страницами (например, сценарии, графику, таблицы стилей и встроенные шрифты). 
Далее приведен пример более подробного манифеста со всеми типами файлов: 


САСНЕ  МАМТЕЕЗТ 


радез 
Рекзопа1іёуТезѕі .һіт1 


Рехѕзопа1ібуТеѕі Ѕсоге.һіт1 


ѕіу1Іеѕ & зсгіріз 
Регѕзопа1ііуТеѕі.сѕѕ 


Рекзопа1іёуТеѕі.јзѕ 


рісёџгеѕ & Ёопіѕ 
Іпадеѕ/етоёіопа1 реаг.ӯро 
Ғопіѕ/тиѕео ѕ1ар 500-керѓҒопі.еої 
Ғопіѕ/тиѕео ѕ1ар 500-мерЕопЕ.моЕЕ 
Ғопіѕ/тиѕео ѕ1ар 500-керҒопі.бЁ 
Ғопіѕ/тиѕео ѕ1ар 500-мерѓҒопі.ѕуд 


Обратите внимание на две новые детали в этом манифесте. Первая — несколько 
строчек начинаются символом #. Эти строчки являются комментариями, предос- 
тавляющими информацию относительно типа следующего за ними содержимого. 
Вторая — для некоторых файлов указаны пути, например Ппасе$/етойопа]_ 
Беаг.јрв. При условии, что эти файлы находятся на веб-сервере и браузер может 
иметь доступ к ним, их можно включать в пакет автономного приложения. 


Для сложных веб-страниц потребуется большое количество вспомогательных фай- 
лов, что может порождать длинные и сложные файлы манифеста. Но наихудшее — 
это то, что одна-единственная ошибка в имени файла вызовет полный сбой авто- 
номного приложения. В перспективе основные веб-редакторы должны облегчить 
жизнь веб-разработчиков в этом отношении. В них будут добавлены возможности 
автоматического создания файлов манифеста для указанных файлов и средства для 
их модифицирования и сопровождения. 


СОВЕТ 


В некоторых случаях разработчик может не включать в автономное приложение 
большие или несущественные ресурсы, такие как, например, изображения большого 
размера или рекламные баннеры. В этом нет ничего предосудительного, но если есть 
подозрения, что отсутствие таких файлов способно вызвать какие-либо проблемы 
(например, сообщения об ошибках, странные пустые области или искаженную компо- 
новку страницы), рассмотрите возможность применения Јауа$сгірї для настройки ва- 
ших страниц в автономном режиме с помощью метода проверки подключения 
(см. разд. "Проверка подключения" далее в этой главе). 


Созданный файл манифеста сохраняется в корневой папке веб-сайта. Ему мож- 
но присвоить любое имя, но в настоящее время наиболее популярными рас- 
ширениями файла являются тапез и аррсасВе. Первое расширение (например, 
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РетзопаШуТез(. та) было бы наиболее логичным, но оно конфликтует с расши- 
рением, используемым на некоторых серверах \т4о\уз (как часть процесса развер- 
тывания СһсКОпсе, используемого приложениями МЕТ). Второе расширение фай- 
ла (т. е. РегѕопајіќуТеѕі.аррсасһе) тоже логично, но менее популярно. В любом слу- 
чае, главное — нужно настроить веб-сервер, чтобы он распознавал используемое 
расширение файла манифеста. Если у вас свой веб-сервер, вы можете это сделать, 
пользуясь инструкцией, изложенной в разд. "Помещение манифеста на веб-сервер" 
далее в этой главе. В противном случае вам нужно связаться с администратором 
вашего хостинга и узнать, какие расширения файлов используются для поддержки 
файлов манифеста. 


ЧАСТО ЗАДАВАЕМЫЙ ВОПРОС 
Каким может быть объем кэша? 
Есть ли какие-либо ограничения на объем кэшируемой информации? 


Максимальный объем кэша, выделяемого для автономных приложений, варьируется, 
в зависимости от браузера. 


Очевидно, что браузеры на мобильных устройствах находятся на нижнем пределе 
диапазона. Так как объем хранилища на таких устройствах ограничен, им приходится 
быть экономными в своем кэшировании. На момент написания этих строк версия 
браузера Заай для іРаа и іРһопе ограничивала каждое автономное приложение 
5 Мбайт кэша. 


Браузеры настольных компьютеров на удивление неоднородны. Етеох по умолчанию 
выделяет каждому автономному приложению 50 Мбайт кэша, а пользователь может 
еще повысить этот предел. (Пользовательские параметры кэша в Еігеїох можно уста- 
новить на вкладке МемогК в окне, открываемом после выбора последовательности 
команд меню Тоо!$ | Орііопѕ | Аахуапсеа.) А вот браузер Сһготе выделяет каждому 
автономному приложению ничтожные 5 Мбайт кэша, обойти которое можно либо 
с помощью специализированного приложения Сһготе (см. ћр://соде.доодіе.сот/ 
сһготе/ехіепѕіопѕ/аррѕ.һїті), либо изменением настроек браузера (см. Һір:// 
{тпуии.сот/5м8Зорр). Разработчики браузера Сһготе планируют в будущем устра- 
нить это ограничение и предоставить пользователям явный контроль над параметра- 
ми кэша для каждого автономного приложения, но на данном этапе 5 Мбайт — это 
все, что они получают. 


К сожалению, этот неоднородный подход к выделению кэша браузерами представляет 
проблему. Например, автономное приложение, требующее больше чем 5 Мбайт кэша, 
будет работать без проблем в браузере Еігеїох, но не в Сһготе. Что еще хуже, при по- 
сещении вашего сайта пользователем Сһготе этот браузер будет пытаться кэширо- 
вать приложение, не сможет этого сделать по причине ограничения, после чего просто 
выбросит все загруженные данные. Это не только тратит впустую время и трафик, но 
также не предоставляет пользователю никакой возможности работать в автономном 
режиме. Он просто не сможет использовать ваше приложение до тех пор, пока не под- 
ключится к Интернету. 


Из всего этого можно сделать следующий вывод: в перспективе автономные приложе- 
ние будут, скорее всего, иметь большие объемы кэша в своем распоряжении. Но в на- 
стоящее время веб-разработчики должны учитывать, что им доступен намного мень- 
ший объем — всего 5 Мбайт. Вследствие этого непрактично использовать возмож- 
ность автономной работы для улучшения производительности, например, загружая 
большие, часто используемые файлы и сохраняя их в течение длительного времени. 
Но хочется надеяться, что эта ситуация в скором времени изменится. 
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Использование манифеста 


Самого факта создания манифеста недостаточно, чтобы браузер обращал на него 
внимание. Чтобы манифест имел какой-либо эффект, на него должны существовать 
ссылки в веб-страницах. Для этого нужно вставить в корневой элемент <веи1> 
атрибут папі #еѕ+ и присвоить ему в качестве значения имя файла манифеста: 


<!РОСТУРЕ Һіт1> 
<һілі Іапод="еп" тапі еѕі="Регѕопа1ібуТеѕі.тапіѓеѕі"> 


Это нужно проделать для каждой страницы, входящей в автономное приложение. 
Для предыдущего примера это означает, что таким способом нужно модифициро- 
вать два файла: РегѕопаіуТеѕі ће! и РегзопаШу Тез Ѕсоге.Һіті. 


ПРИМЕЧАНИЕ 


Веб-сайт может иметь неограниченное количество автономных приложений при усло- 
вии, что каждое из них имеет собственный манифест. Автономные приложения также 
могут совместно использовать некоторые ресурсы (например, таблицы стилей), но 
каждое приложение должно иметь свой отдельный набор веб-страниц. 


Помещение манифеста на веб-сервер 


Тестирование файла манифеста может оказаться сложным процессом. Небольшие 
ошибки могут вызывать скрытые сбои и нарушать весь процесс кэширования. Но, 
тем не менее, на определенном этапе файл манифеста нужно протестировать, чтобы 
удостовериться в том, что разработанное автономное приложение работает так, как 
вы ожидаете. 


Не должно быть неожиданностью то обстоятельство, что автономное приложение 
нельзя тестировать, запуская файлы на исполнение с локального жесткого диска. 
Вместо этого автономное приложение нужно разместить на веб-сервере, будь то 
веб-сервер поставщика услуг Интернета или тестовый веб-сервер разработчика, 
например веб-сервер 155, встроенный в М№іпаоуѕ. 


Тестирование автономного приложения выполняется в такой последовательности: 


1. Первым делом необходимо удостовериться в том, что для предоставления фай- 
лов манифеста в настройках веб-сервера указан МІМЕ-тип бехі/сасһе-юапіѓезё. 
Если веб-сервер будет указывать какой-либо другой тип файла, включая простой 
текстовый файл, браузер будет полностью игнорировать манифест. 


ПРИМЕЧАНИЕ 


Настройка веб-серверов выполняется по-разному. В зависимости от уровня вашего 
опыта и навыков вам может потребоваться помощь знакомого веб-мастера для уста- 
новки МІМЕ-типа (см. шаг 1) и изменения параметров кэширования (см. шаг 2). Допол- 
нительную информацию о МІМЕ-типах см. во врезке "На профессиональном уровне. 
Основные сведения о МІМЕ-типах" главы 5. 


2. Рассмотрите отключение обычного кэширования (см. врезку "На профессио- 
нальном уровне. Традиционное кэширование и автономные приложения" ранее 
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в этой главе) для файлов манифеста. Это может быть необходимым по той при- 
чине, что веб-сервер может давать указание браузерам кэшировать файлы ма- 
нифеста в течение определенного времени, точно так же, как и другие типы 
файлов. Такое поведение логично, но оно может вызвать большие проблемы. 
Проблема состоит в том, что некоторые браузеры могут игнорировать обнов- 
ленные файлы манифеста на веб-сервере и продолжать использовать старые, 
кэшированные файлы манифеста, вследствие чего они также будут продолжать 
использовать старые, кэшированные файлы веб-страниц. (Особенно грешит не- 
охотой расставаться со старыми файлами манифеста браузер ЕтеЮх.) Во избе- 
жание этой проблемы веб-сервер необходимо настроить так, чтобы тот не ука- 
зывал браузерам кэшировать файлы манифеста. 


3. Откройте страницу в браузере, поддерживающем автономные приложения, 
иными словами, практически в любом браузере, за исключением Гщегпе 
ЕхріІогег (см. табл. 10.1). Когда браузер обнаружит, что веб-страница использует 
манифест, он может запросить разрешение на загрузку файлов. Вероятнее всего, 
что такое разрешение будут требовать браузеры мобильных устройств по при- 
чине ограниченных возможностей хранения. Браузеры настольных компьютеров 
могут либо выдавать такой запрос, либо нет. Например, Еігеѓох запрашивает 
разрешение на кэширование (рис. 10.1), а Стоте и Ѕаѓагі — нет. 
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Рис. 10.1. При загрузке страницы, которая использует манифест, браузер Егеох запрашивает 
разрешения на кэширование файлов. Чтобы разрешить загрузку и кэширование указанных в манифесте 
файлов, нужно нажать кнопку АНоми. Если при последующих посещениях страницы Еігеѓох обнаружит 
измененный файл манифеста, он загрузит новые файлы, не спрашивая разрешения 


Получив разрешение, браузер начинает кэширование файлов. Сначала загружа- 
ется манифест, а потом все перечисленные в нем файлы. Процесс загрузки осу- 
ществляется в фоновом режиме, позволяя, таким образом, продолжать просмотр 
страницы. Этот процесс подобен тому, когда браузер загружает изображение 
или видео большого объема и при этом отображает остальную страницу. 


4. Отключитесь от Интернета. Если ваше приложение размещено на удаленном 
сервере, просто разорвите подключение. Если же приложение размещено на ло- 
кальном сервере (т. е. на том же компьютере, что и браузер), остановите веб- 
сайт (рис. 10.2). 


5. Перейдите на одну из страниц автономного приложения и обновите ее. Даже ес- 
ли дать указание браузеру не кэшировать страницу, иногда он все равно сохра- 
нит ее, чтобы можно было возвращаться на ранее просмотренные страницы, на- 
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жимая кнопку Назад. Но если обновить страницу, браузер всегда будет пытать- 
ся подключиться к веб-серверу. При запросе обыкновенной страницы и при от- 
сутствии подключения к Интернету этот запрос не выполнится. Но при обнов- 
лении страницы автономного приложения браузер незаметно предоставляет ко- 
пию страницы из кэша, даже не информируя пользователя об этом. Можно 
переходить с одной страницы автономного приложения на другую, но если пе- 
рейти по ссылке на страницу, не являющуюся частью автономного приложения, 
браузер выдаст знакомое сообщение о невозможности подключиться к удален- 
ному серверу. 
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Рис. 10.2. Точный способ остановки веб-сайта зависит от используемого веб-сервера. 
Здесь показан процесс остановки веб-сайта на сервере 115 для \Міпаомѕ 


АВАРИЙНАЯ СИТУАЦИЯ 
Мое автономное приложение не работает в автономном режиме 


Автономные приложения несколько нестабильны и могут быть выбиты из колеи ма- 
лейшей ошибкой. Если вы выполнили все вышеизложенные шаги, но все равно при 
попытке работать с автономным приложением браузер выдает сообщение о невоз- 
можности подключения, проверьте, не возникли ли следующие наиболее распростра- 
ненные проблемы. 


• Проблема с загрузкой манифеста. Если манифест отсутствует или по каким-либо 
причинам недоступен для браузера, то это очевидно же будет проблемой. Но так- 
же важно, чтобы для файла манифеста на веб-сервере был установлен правиль- 
ный ММЕ-тип (см. врезку "На профессиональном уровне. Основные сведения 
о МІМЕ-типах" главы 5). 


• Проблемы с загрузкой указанных в манифесте файлов. Например, манифест 
может содержать файл изображения, который больше не существует, или файл 
веб-шрифта, формат которого не разрешается веб-сервером. В любом случае, ес- 
ли браузер не сможет загрузить один-единственный файл, он откажется загружать 
все остальные файлы и выбросит все файлы, которые уже были кэшированы. Во 
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избежание этой проблемы начинайте с простых приложений, манифест для кото- 
рых содержит одну веб-страницу и никаких ресурсов. В более сложных случаях 
просмотрите журналы веб-сервера, чтобы узнать, какие именно ресурсы были за- 
прошены браузером (что позволит вам определить точку, в которой произошла 
ошибка, и браузер отказался от продолжения загрузки). 


• Используется старый манифест из кэша. Браузеры могут сохранить файл ма- 
нифеста в кэше (согласно обычным правилам кэширования веб-страниц) и игнори- 
ровать новый манифест. Одним из признаков этой проблемы будет кэширование 
одних страниц автономного приложения, но не других, более новых. Эту проблему 
можно решить, очистив вручную кэш браузера (см. врезку "Малоизвестная или не- 
дооцененная возможность. Очистка кэша браузера" далее в этой главе). 


Обновление файла манифеста 


Заставить автономное приложение работать — это только первая часть задачи. 
Вторая часть — обновление ее содержимого. 


Рассмотрим пример из разд. "Создание манифеста" ранее в этой главе, где кэши- 
руются две веб-страницы. Если обновить файл РегѕопаіќуТеѕі.ћті и перезагрузить 
страницу, браузер все равно будет выводить старую, кэшированную версию стра- 
ницы, даже если компьютер подключен к Интернету. Проблема состоит в том, что 
после сохранения автономного приложения в кэше браузер использует только эту 
кэшированную копию, игнорируя онлайновые версии соответствующих веб- 
страниц и не проверяя, были ли какие-либо изменения. А так как срок хранения 
автономного приложения в кэше никогда не истекает, браузер будет упрямо игно- 
рировать измененные страницы на веб-сервере. 


Но при этом браузер регулярно проверяет присутствие нового файла манифеста. 
Таким образом, можно подумать, что все, что нужно сделать для решения этой 
проблемы, — это сохранить новый файл манифеста на веб-сервере. 


Не обязательно. Чтобы инициировать обновление кэшированного автономного 
приложения, необходимо выполнение следующих требований. 


П Отсутствие кэширования файла манифеста. Если у браузера есть локальная 
кэшированная копия файла манифеста, он никогда не будет проверять наличие 
этого файла на веб-сервере. Разные браузеры подходят по-разному к вопросу 
кэширования файлов манифеста. Некоторые браузеры (например Сһготе) всегда 
проверяют наличие нового файла манифеста на веб-сервере. Но ЕтеЮх следует 
традиционным правилам кэширования и хранит локальную копию файла мани- 
феста в течение некоторого времени. Поэтому, чтобы избежать проблем в этой 
области, удостоверьтесь в том, что ваш веб-сервер явно указывает своим клиен- 
там не кэшировать файлы манифеста (см. разд. "Помещение манифеста на веб- 
сервер" ранее в этой главе). 


С У файла манифеста должна быть проставлена новая дата. Когда браузер 
проверяет наличие нового файла манифеста на сервере, первым делом он смот- 
рит, изменилась ли метка времени последнего изменения. Если нет, браузер не 
будет загружать файл манифеста. 
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П Содержимое файла манифеста должно быть новым. Если браузер обнаружит, 
что содержимое нового файла манифеста не изменилось, он прекращает процесс 
обновления и продолжает использовать ранее кэшированную копию. Эта потен- 
циально препятствующая плану обновления практика имеет практическую цель. 
Повторная загрузка кэшированного приложения занимает время и расходует 
пропускную способность сети, поэтому браузеры выполняют ее только в тех 
случаях, когда это абсолютно необходимо. 


Если вы внимательно читали этот материал, то должны были заметить здесь потен- 
циальную проблему. Что если менять содержимое файла манифеста нет надобно- 
сти, т. к. не были добавлены или удалены никакие файлы, но браузер все равно 
нужно заставить обновить кэш автономного приложения, поскольку содержимое 
некоторых файлов было изменено? В таких случаях следует незначительно изме- 
нить файл манифеста, чтобы он казался новым, хотя, по сути, не является таковым. 
Эту задачу лучше всего реализовать, вставив в файл манифеста комментарий: 


САСНЕ МАМТЕЕЗТ 
#уегѕіоп 1.00.001 
радез 
Рекзопа1іёуТезі .һіт1 


Рехѕопа1ібуТеѕі Ѕсоге.һіт1 


$Еу1ез & зсгіріз 
Регзопа1ііуТеѕі.сѕѕ 


Рекзопа1іёуТеѕі.јзѕ 


рісіёџгеѕ & Ёопіз 
Іпадеѕ/етоёіопа1 реаг.ӯро 
Ғопіѕ/тиѕео ѕ1ар 500-керҒопі.еої 
Ғопіѕ/тиѕео ѕ1ар 500-мерЕопеЕ.моЕЕ 
Ғопіѕ/тиѕео ѕ1ар 500-мерЕопЕ. ЕЕ 
Ғопіѕ/птиѕео ѕ1ар 500-кмерѓҒопі.ѕуд 


В следующий раз, когда нужно обновить кэш, просто измените номер версии, 
в этом примере на 1.00.002, ит. д. Таким образом мы можем заставить браузер об- 
новить кэш и получаем способ отслеживать количество обновлений. 


Новое содержимое не отображается в окне браузера сразу же после загрузки. Когда 
браузер обнаруживает новый файл манифеста, он загружает новые файлы в фоно- 
вом режиме и заменяет ими старые кэшированные файлы. Новое содержимое ото- 
бражается, когда посетитель открывает или обновляет страницу. Чтобы новое 
содержимое отображалось сразу же после загрузки, можно воспользоваться мето- 
дом на Јауа$сгірі, рассматриваемым в разд. "Информирование об обновлениях с по- 
мощью Лауа5стр!" далее в этой главе. 


ПРИМЕЧАНИЕ 


Обновить автономное приложение по частям невозможно. При малейшем изменении 
приложения браузер удаляет старые файлы из кэша и заменяет их новыми, включая 
файлы, которые не были изменены. 
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МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Очистка кэша браузера 


В процессе тестирования автономного приложения часто бывает полезным вручную 
очистить кэш браузера. Таким образом можно тестировать свежие обновления без 
необходимости изменять файл манифеста. 
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Рис. 10.3. Вверху: в браузере Еігеѓох, чтобы просмотреть объем хранилища, занимаемого автономными 
приложениями, выполните команды меню Тоо!$ | Орїііопѕ, в открывшемся диалоговом окне ОрНоп$ 
выберите опцию Айуапсеа и перейдите на вкладку МемогК. На этой вкладке можно просматривать 
объем хранилища, занимаемого каждым автономным приложением и при надобности очистить кэш 

любого из них, выбрав требуемое приложение и нажав кнопку Ветоуе. В данном случае имеется только 
один кэшированный веб-сайт, в домене Іосаіһоѕї (что представляет тестовый сервер на локальном 

компьютере). Внизу: для просмотра кэшированных приложений в браузере Сһготе введите 
абош:аррсасНе-ицегпа!$ в строку адреса 
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Все браузеры разрешают очистку кэша, но каждый из них подходит к решению этой 
задачи по-своему. Наиболее полезные в этом отношении браузеры отслеживают объ- 
ем хранилища, занимаемого каждым автономным приложением (рис. 10.3). Это по- 
зволяет определить, когда кэширование было неудачным, например, веб-сайт прило- 
жения не указывается в списке или же объем кэшированных файлов меньше, чем он 
должен быть. Это также позволяет удалять кэшированные файлы для отдельных сай- 
тов, не затрагивая другие. 


Браузерная поддержка автономных приложений 


К этому времени вы, наверное, уже поняли, что автономные приложения поддер- 
живаются всеми основными браузерами, за обычным исключением — Пете 
ЕхріІотег. Поддержка распространяется на несколько версий назад, что практически 
обеспечивает возможность пользователей браузеров Еігеѓох, Сһтоте и Зам ис- 
полнять автономные приложения. Минимальные версии основных браузеров, под- 
держивающих автономные приложения, перечислены в табл. 10.1. 


Таблица 10.1. Браузерная поддержка автономных приложений 


Минимальная 3.5 5 4 10.6 2.1 2 
версия 


Но различные браузеры поддерживают автономные приложения по-разному. Самая 
большая разница состоит в объеме хранилища, выделяемого автономным приложе- 
ниям для кэширования своих файлов. Это важный аспект, т. к. он определяет, какие 
веб-сайты будут помещены в кэш для автономного доступа, а какие — нет 
(см. врезку "Часто задаваемый вопрос. Каким может быть объем кэша?" ранее 
в этой главе). 


Если браузер не имеет встроенной поддержки автономных приложений (например, 
Пете! ЕхрІогег), предоставить такую поддержку каким-либо обходным решением 
невозможно. Но это обстоятельство не должно останавливать вас от использования 
возможности работы ваших веб-сайтов в автономном режиме. В конце концов ре- 
жим автономной работы — хоть и полезная, но всего лишь необязательная воз- 
можность. 


Браузеры, не поддерживающие автономных приложений, все равно будут работать 
с такими сайтами, только будут требовать для этого подключения к Интернету. 
А пользователи, нуждающиеся в возможности автономной работы с сайтом, на- 
пример, те, кто часто путешествуют, откроют для себя, насколько это ценно поль- 
зоваться браузером иным, чем Іпіегпеї ЕхріІогег. 


Практические методы кэширования 


Итак, мы узнали, как упаковать группу страниц и ресурсов в виде автономного 
приложения. Мы научились создавать файл манифеста, обновлять его и обеспечи- 
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вать исполнение созданного автономного приложения в браузерах. Хотя этих зна- 
ний достаточно для создания простых автономных приложений, более сложные 
веб-сайты иногда требуют дополнительной работы. Например, мы можем хранить 
определенное содержимое онлайн, заменять определенные страницы в автономном 
режиме или определять (программным способом), подключен ли компьютер к Ин- 
тернету. Далее мы научимся реализовывать все эти задачи посредством более про- 
двинутых манифестов и применением кода ЈауаЅсгірі. 


Доступ к онлайновым файлам 


Мы узнали, что после кэширования страницы браузер использует эту копию стра- 
ницы и не обращается к серверу, чтобы узнать, нет ли ее обновленной версии. Вы, 
возможно, не подозреваете, что браузер отказывается обращаться к серверу за все- 
ми используемыми автономным приложением ресурсами независимо от того, 
кэшированы они или нет. 


Допустим, например, что на нашей автономной странице используются два изо- 
бражения: 


<1а згс="Іпадеѕ/10одо.рпо" а1{="Регзопа116у <а17"> 
<іпо згс="Іпадеѕ/епоёіопа1 реаг.јро" а1Е="баа зеоЕЁеЧ реаг"> 


Но манифест кэширует только одно из этих изображений: 


САСНЕ МАМІРЕЅТ 
Регзопа1ііёуТеѕі .Һіт1 


Регзопа1іёуТеѕі $соге . Вт 


Регзопа11$уТезе.сзз Регзопа11$уТезе.)з 
Іпадеѕ/етоёіопа1 реаг.ӯро 


Размышляя логически, можно предположить, что браузер возьмет изображение 
етойНопа| Беаг.рпе из своего кэша, а изображение Іово.рпе запросит у веб-сервера 
(при условии, что компьютер подключен к Интернету). Ведь так происходит при 
работе с обычными сайтами, когда браузер обращается с кэшированной страницы к 
странице, которая еще не была сохранена в кэше. Но в действительности в этом 
отношении автономные приложения работают по-другому. Браузер берет изобра- 
жение етоНопа! Беаг.јрв из кэша, но игнорирует графику Іоро.рпо, отображая вме- 
сто нее либо специальный значок отсутствующего изображения, либо просто пус- 
тое место, в зависимости от браузера. 


Эта проблема решается добавлением в манифест нового раздела. Он начинается 
с заголовка МЕТИОВК:, а за ним следует список файлов, которые нужно получать 
с веб-сервера: 


САСНЕ МАМТЕЕЗТ 
Регзопа1ііёуТеѕі .Һіт1 


Регѕзопа1іёуТеѕі Ѕсоге.һёті 


Регзопа1ібуТеѕё.сѕѕ 


Регзопа1ібуТезё.јз 
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Іпадеѕ/етоёіопа1 реаг.ӯро 


МЕТИОВК: 
Іпадеѕ/1одо.рпо 


Теперь, когда компьютер подключен к Интернету, браузер будет пытаться полу- 
чить файл 10оро.рпо с веб-сервера, но при отсутствии подключения предпринимать 
такую попытку не будет. 


Здесь у вас, наверное, возникает вопрос: зачем утруждать себя созданием явного 
списка файлов, которые мы не хотим кэшировать? Одна из причин — из-за воз- 
можностей хранилища, например, мы игнорируем файлы большого объема, чтобы 
наше приложение могло сохраниться в кэше браузеров, разрешающих максимум 
5 Мбайт кэша для каждого автономного приложения. 


Но более вероятной будет ситуация, когда у нас есть содержимое, которое должно 
предоставляться, когда запрашивается, но никогда не должно кэшироваться, на- 
пример, отслеживающие сценарии или динамически создаваемая реклама. В таком 
случае, самым легким решением будет добавить звездочку (*) в раздел мЕТИОВК. Это 
знак подстановки, указывающий браузеру обращаться к серверу за всеми ресурса- 
ми, которые не были явно кэшированы: 


МЕТИОВК: 


ж 


Знак подстановки можно также использовать, чтобы указывать файлы конкретного 
типа (например, выражение * . зро обозначает все изображения ЈРЕС) или все файлы 
на определенном сервере (например, выражение р: //ммм . доод1е-апа1уЕ1сз.сот/* 
обозначает все ресурсы в домене Соое Апауйс$). 


ПРИМЕЧАНИЕ 


У вас может возникнуть мысль, что манифест можно было бы упростить, используя 
знак подстановки для указания всех файлов, которые нужно сохранить в кэше, вместо 
того, чтобы задавать каждый отдельный файл. К сожалению (или к счастью), указание 
файлов для кэширования посредством звездочки не поддерживается, т. к. создатели 
НТМІ5 беспокоились, что небрежные веб-разработчики могут пытаться поместить в 
кэш огромные веб-сайты. 


Добавление резервных решений 


Манифест указывает браузерам, какие файлы нужно кэшировать, а какие получать 
с сервера (перечисляются в разделе меткокк). Манифест также может содержать 
раздел для указания резервных решений, т. е. замены одного файла другим, в зави- 
симости от наличия или отсутствия подключения к Интернету. 


Раздел резервных решений начинается с заголовка гАГТВАСК:, который можно рас- 
положить в любом месте манифеста. После заголовка дается попарный список фай- 
лов. Первый файл пары используется при наличии подключения к Интернету, а 
второй является резервным и выбирается при отсутствии подключения: 


Глава 10. Автономные приложения 365 


ЕАБТВАСК: 
Регѕопа1ібузсоге.һіті Регѕопа1іїуѕсоге оЁҒ1іпе.һҺёт1 


Браузер загружает резервный файл (в данном случае это файл Регѕопа[іќуЅсоге _ 
о !пе.һті!) и кэширует его. Но браузер использует этот файл только в том случае, 
если компьютер не подключен к Интернету, а при наличии подключения браузер 
запрашивает первый файл (т. е. в данном случае РегзопаШузЗсоге.В 1). 


ПРИМЕЧАНИЕ 


Не забывайте, что компьютер не обязательно должен быть отключен от Интернета, 
чтобы автономное приложение находилось в режиме оффлайн. В этом отношении 
важной является доступность данного домена. Если домен не отвечает по любым 
причинам, автономное приложение считает себя оффлайновым. 


Причин для использования резервных файлов большое множество. Например, для 
автономной работы основную страницу можно заменить более простой страницей, 
которая не использует сложные сценарии или ресурсы большого объема. Раздел 
резервных файлов можно разместить в любом месте манифеста при условии, что он 
обозначается соответствующим заголовком гЕАБЪВАСК:. 


САСНЕ МАМТЕЕЗТ 
Регзопа1ііёуТеѕі . Вет 


Регѕопа1іїуТеѕі Ѕсоге. Вет 


Регзопа1ібуТезё.сѕѕ 


ЕАШВАСК: 

Регзопа11Еу5соге.Вт1 Регѕопа1ііуЅсоге оЁҒ1іпе.Һіті 
Іпадеѕ/епоёіопа1 реаг.јро Іпадеѕ/епобіопа1 реаг ѕта11.јро 
Регѕопа1ібуТеѕі.јѕ Регѕопа1ібуТеѕі оЁҒ1іпе.јѕ 


2 


ЕТМОВК: 


ПРИМЕЧАНИЕ 


Кстати, раздел манифеста, в котором перечисляются файлы для кэширования, назы- 
вается САСНЕ:. При желании этот заголовок можно указывать, но это не обязательно, 
если только список файлов для кэширования не задается после одного из других раз- 
делов. 


Раздел резервных файлов также поддерживает использование подстановочного 
символа. Эта возможность позволяет создавать встроенную страницу с сообщением 
об ошибках: 


ЕАШВАСК : 
/ ОЕЕ11пе. Бет 


Теперь допустим, что браузер запрашивает страницу, находящуюся на том же веб- 
сайте, что и автономное приложение, но которая не была кэширована. Если компь- 
ютер подключен к Интернету, браузер попытается обратиться к серверу и получить 
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живую страницу. Но при отсутствии подключения, или если веб-сайт недоступен 
по какой-либо другой причине, или запрашиваемой страницы просто нет на серве- 
ре, браузер отображает кэшированную страницу ой іпе.ћті (рис. 10.4). 


=Та 
| О Мея рие [+ - 
Ф, Һір://Лосаһоѕ/ЛтадіпагуРаде.Һіті - с ||. Е: 


Тһе Ше уои ещеге4 4ое$ поѓ ехіѕї іп ће сасће. 


Або. й ейег: 


а. йоеѕ пої ехіѕї оп ће уер зегуег. ог 
Ь. уоп аге опе 


Рис. 10.4. В данном примере страница ІтадіпагуРаде.ћіті не существует. Интересно, что браузер 
не обновляет соответствующим образом информацию в строке адреса, вследствие чего посетитель 
не знает настоящее название отображаемой страницы с сообщением об ошибке доступа 


В только что рассмотренном примере для обозначения любой страницы применяет- 
ся несколько произвольная нотация подстановочного символа в виде косой черты 
(/). Это может показаться несколько странным в виду того, что в разделе метиоккК: 
для этой же цели применяется звездочка. В действительности некоторые браузеры 
(например, Еігеѓох) разрешают использование звездочки в качестве подстановочно- 
го символа в разделе резервных файлов. Это означает, что для таких браузеров пре- 
дыдущий пример можно переделать: 


ЕАБТВАСК: 
* оЁҒЕ1іпе.ҺітІ 


Кроме этого, можно указать резервные ресурсы, совпадающие со всеми файлами 
в указанной папке: 


ЕАБТВАСК: 
ВЕЕр: / /милм. зирегАррѕОпЅёегоіаѕ.огд/раіпі арр/* оЕЁЕ11те.Вт1 


Или же ресурсы, совпадающие с определенными типами файлов: 


ЕАБВАСК: 
*.)ра 1155119 рісіёџоге.јра 


К сожалению, другие браузеры не понимают этот логичный синтаксис, по крайней 
мере, пока еще не понимают. 


Проверка подключения 


Раздел указания резервных файлов можно использовать в удобном ЈауаЅсгірі- 
методе для определения, находится ли браузер в режиме онлайн или нет. Опытные 
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разработчики Јауа$сгірі, наверное, помнят свойство пауздафох.опЬ1пе, предостав- 
ляющее слегка ненадежный способ проверки, находится ли браузер в настоящее 
время в онлайн. Но проблема с этим методом состоит в том, что свойство опііпе 
в действительности отображает состояние параметра браузера "Работать автоном- 
но", а не собственно наличие или отсутствие подключения к Интернету. Но даже 
если бы свойство опііпе было более надежным индикатором наличия подключения, 
оно все равно не могло бы сообщить нам, браузер не загрузил страницу потому, что 
он не смог подключиться к серверу, или по какой-либо другой причине. 


Эта проблема решается с помощью резервного решения, которое загружает разные 
версии одной и той же функции ЈауаЅстірі в зависимости от того, находится ли 
приложение онлайн или оффлайн. Раздел ЕАТТВАСК: манифеста будет таким: 


ЕАБТВАСК: 
оп11пе.)5 оЁЁ 1Ііпе.јѕ 


Первоначальная версия веб-страницы ссылается на ЈауаЅсгірі-файл опііпе.ј: 


<!РОСТУРЕ Һёт1> 
<һімі 1апа="еп" тапі Ғеѕё="регѕопа1іёу.тапіҒеѕі"> 
<Һеаа> 

<пефа срахзеф="аЕЕ-8"> 

<Е1Е1е>...</&11е> 

<ѕсгіріё згс="оп1іпе.јѕ"></ѕсгірі> 


Она содержит эту очень простую функцию: 


Ғопсііоп іѕбііёеоп1іпе () { 
геїџгп ігое; 


} 
Но если файл опііпе.јѕ недоступен, браузер использует вместо него файл опе. јѕ, 
который содержит ту же функцию, но с другим результатом: 


Ғопсёіоп іѕбіёеоп1іпе () { 
геіџгп Ёа1ѕе; 


} 


В исходной странице, когда нужно узнать, находится ли приложение в режиме 
онлайн, выполняем эту проверку с помощью функции іѕѕібеоп11іпе (): 


уаг аіѕрІаубіаіцз = аоситепё.деіЕ1етепіВута ("аіѕр1ауѕёаіиѕ"); 
1Е (іѕ5іёеОоп1іпе ()) { 
// (Можно выполнять задачи, требующие подключения к Интернету, такие 


// как взаимодействие с сервером с помощью объекта ХМІНЕЄрВеаиеѕі.) 
аіѕрІауѕЅіаіцѕ.іппегнНтТмі = "Вы подключены к Интернету, " + 
"и веб-сервер доступен."; 
} 
е1зе { 
// (Приложение исполняется в автономном режиме. Может быть, 
// следует скрыть или программным способом изменить определенное 


// содержимое или отключить некоторые возможности.) 
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аіѕрІауѕЅіаіцѕ.іппегнтТмі = "Это приложение исполняется " + 
"в автономном режиме."; 


Информирование об обновлениях 
с помощью Уауа$ сир 


С автономным приложением можно взаимодействовать посредством сравнительно 
ограниченного интерфейса на основе ЈауаЅсгірі-объекта арр1ісабіопсасће. 


Свойство эсабоѕ объекта арр1ісаєіопсасће указывает, какую операцию браузер вы- 
полняет в настоящее время — проверяет наличие обновленного манифеста, загру- 
жает новые файлы и т. п. Значение этого свойства часто обновляется, и оно почти 
такое же полезное, как и взаимодействующие события (табл. 10.2), которые сраба- 
тывают при изменении статуса объекта арр1ісабіопсасће. 


Таблица 10.2. События кэширования 


Событие Описание 


опСћескіпа Когда браузер обнаруживает в веб-странице атрибут тапіѓеѕё, он акти- 
вирует это событие и проверяет наличие соответствующего файла 
манифеста на веб-сервере 


опМо0рдаее Если браузер уже загрузил файл манифеста и этот файл не был изме- 
нен, он активирует это событие и не предпринимает никаких дальнейших 
действий 


опромп1оаа1т9 Браузер активирует это событие, прежде чем начинать загрузку манифе- 
ста (и указанных в манифесте файлов). Это происходит при первой 
загрузке файлов манифеста и при обновлениях 


опРгодгезѕз Браузер периодически активирует это событие при загрузке файлов, 
чтобы информировать о ходе загрузки 


опСасреа Событие указывает на завершение первоначальной загрузки для нового 
автономного приложения. После этого больше не происходит никаких 
событий 


опураафеКеайу Событие указывает на завершение загрузки обновленного содержимого. 
На этом этапе новое содержимое готово к использованию, но не отобра- 
жается в окне браузера до тех пор, пока страница не будет перезагруже- 
на. После этого больше не происходит никаких событий 


опЕггог Где-то произошла ошибка. Возможно, недоступен веб-сервер (в таком 
случае страница переключается в автономный режим), возможно, в ма- 
нифесте использован неправильный синтаксис или недоступен кэширо- 
ванный ресурс. После этого события не происходит больше никаких дру- 
гих событий 


опорзо1еёе В процессе проверки на наличие обновлений браузер обнаружил отсут- 
ствие манифеста, после чего он очищает кэш. При следующей загрузке 
страницы браузер загрузит ее с веб-сервера 


Глава 10. А 


ПРИ 
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МЕЧАНИЕ 


На момент написания этих строк различные браузеры предоставляли разный уровень 
поддержки событий кэширования. Например, браузер Еігеїох игнорирует такие полез- 
ные события, как опСһескіпо И опОрдахеВеаяду, но активирует события опћоурраа+е 
И опЕггог. 


Наиболее 


полезным событием является событие опураа+еКеаау, которое сигнализи- 


рует о загрузке НОВОЙ версии автономного приложения. Хотя новая версия готова 
к использованию, в окне браузера все еще отображается старая версия. В таком 
случае желательно дать пользователю знать, что новая версия приложения готова 
к использованию. Для этого можно применить следующий код: 


<ѕсгірё> 


міпаои.оп1оаа = Ёопсіёіоп () { 


// Подключаем обработчик события оп0раа+еВеаду. 


арр1ісаёіопСасһе.опирӣаіегеаду = Еапс®1оп() { 


уаг Ч1зр1аубфаеаз = аосопепіё .деіЕ1етепіВута ("аі ѕр1аубіаіиѕ"); 


// Доступна новая версия приложения. 


// Чтобы загрузить ее, обновите страницу. 


аіѕр1Іауѕёаёиѕ.іппегнНтТмі = "Тһеге із а пем уегѕіоп оЁ " + 


} 


} 
</ѕсгірё> 


"Еһ1іѕ арр1ісаёіоп. То 1оаа іё, " + 
"геҒгеѕһ ёһе раде."; 


Или же можно предложить обновить страницу программным способом, используя 
метод кхіпаоу. Іосаёіоп.ге1оаа (): 


<ѕсгірё> 


міпаоим.оп1оаа = Ёопсііоп () { 


арр1ІісаёіопСасһе.опирдӢаёегеаду = Ёџпсііоп() { 


1Е (сопЁігт ( 


// Доступна новая версия приложения. Загрузить ее сейчас? 


"А пем уегѕіоп оЁ {515$ арріісаёіоп із ауаі1ар1Іе. Ве1оаа пом?")) { 


міпаоу. І1осаііоп.ге1оаа (); 


} 
} 
</ѕсгірё> 


Результаты выполнения последнего примера показаны на рис. 10.5. 


Объект ар 


р1ІісаїіопСасһе также предоставляет два метода для более специализиро- 


ванных сценариев. Первый метод, ораа+е (), проверяет наличие нового манифеста. 
В случае его существования метод начинает загрузку в фоновом режиме. Иначе не 
предпринимается никаких дальнейших действий. 
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Рис. 10.5. Приложение предлагает пользователю отобразить обновленное содержимое, 
нажав кнопку ОК. В противном случае новое содержимое будет выведено в окно 
при следующей загрузке страницы или ее обновлении 


Хотя браузеры проверяют наличие обновлений автоматически, если есть основания 
полагать, что манифест изменился после первой загрузки страницы, метод џорааѓе () 
можно вызвать вручную. Этот метод может быть полезным в приложениях с про- 
должительным временем работы, например, когда пользователь работает на одной 
и той же странице в течение всего дня. 


Второй метод, ѕмарсасће (), указывает браузеру начать использование нового со- 
держимого кэша после загрузки обновления. Но этот метод не обновляет отобра- 
жаемое содержимое страницы, для этого нужно перезагрузить или обновить стра- 
ницу. Какая же тогда от этого метода польза? Переключение на новое содержимое 
кэша обеспечивает выборку всего загружаемого с этого момента содержимого, на- 
пример динамически загружаемого изображения, из нового кэша, а не из старого. 
При аккуратном использовании метод змарСасве() может позволить странице за- 
гружать новое содержимое, не требуя полной перезагрузки страницы (в процессе, 
возможно, сбрасывая все настройки приложения в исходное состояние). Но в 
большинстве приложений метод ѕмарсасће () доставляет больше хлопот, чем поль- 
зы и может вызывать неочевидные ошибки, смешивая новые и старые части кэша. 


ГЛАВА 11 


Взаимодействие 
с веб-сервером 


Мы начали изучать НТМІ5 с возможностей маркировки, таких как семантические 
элементы, веб-формы и видео. Но по мере овладения материалом, мы постепенно 
смещали наше внимание на программирование веб-страниц и на части НТМГ5, 
движимые ЈауаЅстірі. А теперь мы затронем новые возможности НТМГ5, которые 
выводят веб-программирование на новый уровень. Для этих возможностей требу- 
ется не только применение ЛауаЗспрь но и немного помощи со стороны серверных 
программ. Серверная программа — это программа, которая исполняется на сервере 
и может быть на любом из языков серверного программирования. 


Добавление в наш инструментарий серверного программирования представляет 
небольшую проблему. С одной стороны, выбор языка серверного программирова- 
ния не имеет значения при условии, что он может работать с чисто НТМГ5- 
страницами (а все эти языки могут). Но с другой стороны, бессмысленно влезать по 
уши в изучение новой технологии, которую вы не планируете использовать или 
которая не поддерживается вашим веб-хостом. А хороших языков серверного про- 
граммирования предостаточно, включая РНР, АЗР.МЕТ, Кобу, Јауа, Руіћоп и мно- 
гие другие. 


В данной главе эта проблема решается посредством использования очень неболь- 
шого объема весьма простого кода серверного программирования. Этого кода как 
раз достаточно, чтобы завершить каждый пример и позволить протестировать 
НТМЕ5-сторону. Вы сможете модифицировать и расширить этот код на своих веб- 
сайтах в зависимости от ваших целей и предпочитаемого языка серверного про- 
граммирования. 


Так что же это за возможности, требующие вмешательства со стороны сервера? 
Спецификация НТМГ5 регламентирует два новых способа взаимодействия веб- 
страниц с сервером. Первым из них являются отправляемые сервером события 
(ѕегует-ѕепі сует), посредством которых сервер может периодически связываться с 
веб-страницей и передавать ей информацию. Второй способ, более амбициозный, 
называется инфраструктурой веб-сокетов (жеб ѕосКеіѕ) и позволяет свободный 
двусторонний обмен информацией между сервером и браузером. Но прежде чем 
приступить к изучению этих возможностей, мы вкратце рассмотрим средство, при- 
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меняемое в настоящее время для реализации взаимодействия между веб-серверами 
и их клиентами: объект ХМГНЕЕрВеааезе. 


ПРИМЕЧАНИЕ 


Технологии отправляемых сервером событий и веб-сокетов выглядят обманчиво про- 
стыми. Разобраться, как они работают, и создать очень простой пример (как в этой 
главе) достаточно легко. Но расширить эти начальные знания и приобрести опыт, что- 
бы создать решение, которое будет надежно работать на профессиональном сайте и 
предоставлять требуемые вам функциональности, совсем нелегко. Из всего этого 
можно сделать следующий вывод: чтобы реализовать эти возможности на своем веб- 
сайте, вам, вероятно, придется обратиться за помощью к кому-то, кто обладает со- 
лидным опытом в области серверного программирования. 


Отправка сообщений на веб-сервер 


Прежде чем мы сможем понять новые возможности НТМТ.5 в области взаимодей- 
ствия с сервером, нам нужно знать, каковой была ситуация в этой области раньше. 
Это означает изучение важного ЈауаЅсгірі-объекта хмьнеервеачиез+, посредством ко- 
торого веб-страницы могут взаимодействовать с веб-сервером. Если вы уже знако- 
мы с этим объектом (и используете его в своих страницах), то можете пропустить 
материал данного раздела. Но если ваша карьера веб-разработчика пока состоит из 
разработки только более традиционных решений, вам нужно ознакомиться с этим 
материалом, чтобы получить необходимые базовые знания. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Развитие взаимодействия с веб-сервером 


На ранних этапах становления Интернета взаимодействие с веб-сервером было про- 
стым делом: браузер просто запрашивал веб-страницу, а веб-сервер отправлял ему 
эту страницу. Вот и все взаимодействие. 


Но немного позже разработчики программного обеспечения начали проявлять изобре- 
тательность. Они разработали серверные средства, которые можно было помещать 
между первым шагом (запрос страницы браузером) и вторым шагом (отправка стра- 
ницы браузером), исполняя определенный код на веб-сервере. Идея заключалась в 
том, чтобы динамически изменять страницу (например, удаляя из нее блок разметки) 
или даже создавать полностью новую страницу (например, считывая запись из базы 
данных и генерируя специальную страницу, содержащую информацию о продукте). 


Потом веб-программисты вошли во вкус и захотели создавать страницы, обладающие 
еще большей интерактивностью. Эту задачу можно было реализовать с помощью ин- 
струментов серверного программирования (немного похимичив) при условии, что 
браузер не возражал против обновления страницы. Например, если посетитель ин- 
тернет-магазина поместил новый товар в свою корзину, это событие нужно отобра- 
зить. Для этого информация о новом товаре в корзине отправляется на веб-сервер 
(посредством веб-форм, рассматриваемых в главе 4), а веб-сервер отправляет брау- 
зеру обновленную страницу, отображающую текущее содержимое корзины покупок. 
Эта стратегия получила большой успех, однако была несколько неуклюжей. 


Но веб-разработчики на этом не остановились и продолжали изыскивать новые спо- 
собы улучшения интерактивности между браузером и веб-сервером. Теперь они хоте- 
ли иметь в своем распоряжении средство для создания веб-приложений (наподобие 
программ электронной почты), в которых не нужно было бы постоянно обновлять пол- 
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ностью всю страницу. Решение было найдено в виде набора методов, которые иногда 
называются АЈАХ, но почти всегда связаны со специальным Јауа$сгірі-объектом 
ХМТНЕЕрВеааез*. Посредством этого объекта веб-страницы могут обратиться к серве- 
ру, отправить ему данные и получить от него ответ, не обновляя не то что всей стра- 
ницы, но вообще никакой ее части. Это расчищает дорогу для управления посредст- 
вом Јауа$сгірї всеми аспектами страницы, включая обновление ее содержимого. Эта 
технология также позволяет сделать веб-страницы более элегантными и оперативными. 


Объект ХМІНірВедиеѕі 


Основным инструментом, который предоставляет веб-страницам возможность 
взаимодействовать с сервером, является объект хмынеЕрвеааез+. Объект 
ХМЕНЕЕрВечаезЕ изначально был создан корпорацией Місгоѕой для того, чтобы 
улучшить веб-версию своей программы электронной почты ОчЙоок, но он посте- 
пенно распространился на все современные браузеры. В настоящее время он явля- 
ется основной частью большинства современных веб-приложений. 


Ключевая идея в основе объекта ХМЬНЕЕрВеаиезе состоит в том, что он позволяет 
коду Јауа$сгірі самостоятельно направлять запросы к серверу, когда приложению 
требуются дополнительные данные. Эти запросы осуществляются асинхронно, что 
означает, что веб-страница остается доступной ДЛЯ работы даже в процессе выпол- 
нения такого запроса. Более того, посетитель страницы никогда даже не догадыва- 
ется о выполняющемся за кулисами запросе (если только не выводится соответст- 
вующее извещение или индикатор хода выполнения). 


Объект хмінєсрКеаџеѕё является идеальным инструментом для получения данных 
с веб-сервера. Далее приведено несколько примеров данных, которые можно полу- 
чить с веб-сервера посредством этого объекта. 


П Данные, хранящиеся на сервере. Это может быть информация в файле или, 
в большинстве случаев, в базе данных. Например, посетитель может затребовать 
информацию о продукте или о компании. 


П Данные, которые можно вычислить только на сервере. Например, веб-сайт 
может содержать на сервере программу, выполняющую сложные вычисления. 
Эти вычисления можно было бы попытаться выполнить в браузере с помощью 
Јауа$сгірё, но по разным причинам это может оказаться невозможным. Напри- 
мер, математические возможности Лауа5спре могут быть ниже требуемого уров- 
ня или же код может не иметь доступа к некоторым данным, требующимся для 
вычислений. Также код может выполнять секретные вычисления, которые вы не 
хотите выставлять напоказ для всех, кто пожелает их видеть, чтобы избежать 
потенциальных несанкционированных манипуляций с вычислениями. Или же 
вычисления могут требовать возможностей, которые настольный компьютер не 
в силах предоставить, как это может сделать мощный веб-сервер (например, 
прорисовка трехмерной сцены). Во всех подобных случаях имеет смысл выпол- 
нять вычисления на сервере. 


О Данные, которые находятся на чьем-то другом сервере. Веб-страница не мо- 
жет обращаться напрямую к чьему-то другому веб-серверу. Но она может вы- 
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звать программу на своем веб-сервере (посредством объекта хмінеєркедоезі), 
которая в свою очередь может вызвать другой веб-сервер, получить от него дан- 
ные и возвратить эти данные на исходную страницу. 


Лучший способ разобраться с объектом хмьнеЕрВеаиез+ — это начать эксперимен- 
тировать с ним. Этим мы и займемся в последующих разделах, рассмотрев два про- 
стых примера. 


Отправка запроса веб-серверу 


На рис. 11.1 показана веб-страница, которая просит веб-сервер выполнить простое 
математическое вычисление. Этот запрос отправляется веб-серверу посредством 
объекта ХМЬНЕ&рВеааез*. 


ЕЕ > 
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Рис. 11.1. По нажатию кнопки АзК пе Зегуег веб-страница создает объект ХМЬНЕЕрВечаез 
и отправляет два числа на веб-сервер. Веб-сервер отрабатывает простой сценарий, выполняющий 
математическую операцию над числами, и отправляет ответ обратно на веб-страницу (см. рис. 11.2) 


Прежде чем мы сможем создать эту страницу, нам понадобится какой-либо сервер- 
ный сценарий для обработки полученной от веб-страницы информации (в данном 
случае два введенных в нее числа) и отправки на нее полученного результата вы- 
числений. Эту задачу можно выполнить на любом существующем языке серверно- 
го программирования (в конце концов, отправить небольшой фрагмент текста на- 
много легче, чем целый документ НТМІ). В нашем примере используется сценарий 
РНР, в большей мере потому, что это сравнительно простой язык, который поддер- 
живается почти всеми хостинговыми компаниями. 


Создание сценария 


Сценарий РНР создается в простом текстовом файле и имеет следующую структуру: 


<?рһр 
// (Код вставляется сюда.) 
?> 
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Для данного примера код для выполнения вычисления и предоставления результа- 
тов донельзя простой и выглядит так: 


<?рһр 
$пит1 = $ СЕТ ['потрег1!']; 
$пит2 = $ СЕТ ['попрег2']; 


$зим = бпим1 + 5$пџит2 
есһо ($ѕит) ; 
ро 


Даже если вы и не эксперт по РНР, у вас, скорее всего, не будет трудностей разо- 
браться, что этот код делает. Первым делом мы получаем два числа, отправленные 
веб-страницей: 


Ѕ5пит1 $ СЕТ ['попрег1!']; 


$ СЕТ ['попрег2']; 


5пит2 


Знак доллара ($) обозначает переменную, поэтому код создает две переменные: 
$пот1 И $пии2. Значения для переменных код извлекает из встроенной в РНР кол- 
лекции, называющейся $ сет. Эта коллекция содержит всю информацию из ОКІ, 
посредством которой был запрошен данный сценарий. 


Например, если поместить сценарий РНР в файл \!е Сасиаюг.рЬр, строка ОКІ 
с запросом этого сценария будет выглядеть так: 


ВЕЕр: //ммм.маач1са1ХМЬНЕЕрВесаезТез® . сом/ 
МерСа1со1абот .рһр?потрег1=34 &пипЬег2=46 


В данном случае ОКІ содержит две единицы информации в конце (в части ОКІ, 
называющейся строкой запроса, — доегу ѕігіпе). Значение первой переменной в 
этой части, попрег1, равно 34, а второй, потрег2, равно 46. Начало строки запроса 
обозначается знаком вопроса (?), а каждая последующая переменная — знаком 
амперсанда (5). Когда код РНР начинает исполняться, он извлекает эту информа- 
цию из ОВГ и сохраняет ее в коллекции $ сет, где она доступна для последующих 
операций. (Большинство платформ серверного программирования поддерживает 
модель, подобную этой. Например, в технологии АЗР эта информация сохраняется 
в коллекции Вестез®. ОџегуЅёгіпд.) 


ПРИМЕЧАНИЕ 


Ветераны НТМІ знают, что данные на веб-сервер можно отправлять двумя способа- 
ми — посредством строки запроса или вставкой их в тело запроса. В любом случае 
данные кодируются одинаково, и доступ к ним на сервере предоставляется похожим 
образом. Например, в РНР данные, переданные в теле запроса, помещаются в кол- 
лекцию $ РОТ. 


Получив эти два числа, сценарий РНР просто суммирует их: 
$зищ = $питі + $пит2 
Последний шаг — отправить результаты назад веб-странице, которая подала за- 


прос. Эти результаты можно было бы обернуть в разметку НТМІ или даже в при- 
способленную для данных разметку ХМІ, но это будет слишком для данного приме- 
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ра, и простого текста будет вполне достаточно. Но независимо от выбранного форма- 
та данных, все, что требуется для их отправки, — это простая РНР-команда есро: 


есһо ($ѕит); 


Итак, сценарий состоит из всего четырех строк РНР-кода. Но этого достаточно, 
чтобы установить основной шаблон: веб-страница задает веб-серверу вопрос, а веб- 
сервер предоставляет ответ на этот вопрос. 


ПРИМЕЧАНИЕ 


Простота вычислений в данном примере может породить вопрос: нельзя ли выпол- 
нить их полностью в браузере посредством Јауа$сгірї, а не прибегать к помощи сер- 
вера? Конечно же, можно. Но в данном случае важно не собственно вычисление. Рас- 
смотренный сценарий РНР служит примером для выполнения любой задачи, которую 
нужно выполнить на сервере. Вычисления могут быть любой сложности, но базовый 
образец обмена данными будет тем же. 


Обращение к веб-серверу 


Вторым шагом будет создание страницы, которая с помощью объекта хмінєєркеаџеѕё 
использует сценарий РНР. Код начинается достаточно просто. Сначала создается 
объект хмініервеаџезё для использования во всех функциях: 


уаг гед = пем ХМЬНЕЕрВеааез® () ; 


При нажатии кнопки АѕК е Ѕегуег вызывается функция аѕкѕегуег (): 


<аіу> <р>Епіег їмо пипрегз: 
<іпроі іа="попрег1" ёуре="попрег"> 
<іпроі іа="попрег2" ёуре="пипрег"> 
</р> 
<р>То аѕк ЕВе ѕегуег ёо ааа ёһет, міїћһоџё геЁгезр1па Пе раде, 
с1іск іһіз риёёоп:<риіёоп опс1іск="аѕКЅегуег () "> 
АЗК іһе Ѕегуег</роёёоп> 


</р> 
</аіу> 
<р іа="геѕи1"></р> 


Посредством объекта хмінєєркеаџеѕє функция аѕкѕегуег () выполняет запрос в фо- 
новом режиме. Сначала она получает требуемые данные — два числа: 


Ғопсёіоп аѕкЅегуег () { 


уаг попрег1і = аосимепе.дчеЕ1етеп®ВуТа ("попрег1") .уа1џе; 


уаг питрег2 = аосимеп® .деёЕ1епепЕВута ("попрег2") .уа1џе; 


А потом создает из этих данных строку запроса: 


уаг ааёаТоЗепа = "?пипрег1=" + питрегі + "&пиопрег2=" + пипрег2; 


Теперь все готово для создания запроса, который начинается методом орел () 
объекта ХМЬНЕЕрВечиез+. В качестве параметров методу передается тип операции 
НТТР (сет или роѕт), ОКІ запроса и значение + кое или ға1ѕе, определяющее режим 
выполнения запроса браузером — асинхронно или нет. 


геа.ореп ("СЕТ", "ИерСа1іси1аёбог.рһр" + ЧафаТобепа, ігое); 
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ПРИМЕЧАНИЕ 


Веб-эксперты сходятся в едином мнении — последний параметр метода ореп() все- 
гда должен быть +гое, что означает асинхронное выполнение запроса. Причиной это- 
му то обстоятельство, что ни один веб-сайт не является полностью надежным, и син- 
хронный запрос (т. е. запрос, который заставляет код ожидать ответа) может потенци- 
ально вызвать сбой всей страницы, пока он ожидает ответа. 


Но прежде чем отправлять запрос, к событию опВКеайуѕбасеСһапде объекта 
ХМЕНЕЕрВечаезе необходимо подключить функцию. Это событие активируется при 
получении информации от сервера, включая конечный результат вычислений: 


геа.опгеаЯуз са есвапае = һапаїедегуегКезропѕе; 


Теперь можно начинать процесс, вызвав метод зепа() объекта хмынеервеаиезе. Но 
помните, что код продолжает исполняться без каких-либо задержек. Единственный 
способ получить ответ — это обратиться к событию опВеадуѕЅёабеСћһаподе, которое 
можно будет активировать позже: 


теа.зепа(); 


аосотепі .дееЕ1етепЕВута ("геѕи1ё") .іппегнНтмі= 
"Тре гедоеѕі Ваз Бееп ѕепі."; 


} 


Получив ответ, нужно немедленно проверить два свойства объекта хмынеЕрВеацез+. 
Сначала проверяется свойство геайуѕса+е, значение которого изменяется от 0 до 4 
в процессе выполнения запроса. При инициализации запроса это значение равно 1, 
при отправке — 2, при частичном получении ответа — 3, при завершении выпол- 
нения — 4. Если значение свойства геадузеаее не равно 4, нет смысла продолжать 
дальнейшую обработку и нужно проверить значение свойства э+аеаз, которое пре- 
доставляет код состояния НТТР. Для наших целей значение этого свойства должно 
быть 200, что означает отсутствие каких-либо проблем. Значение этого свойства 
будет равно 401 при запросе неразрешенной страницы; 404, если запрошенная 
страница не была найдена; 302, если страница была перемещена; или 503, если 
страница занята. (Полный список кодов ошибок НТТР см. по адресу 
Ұүүу.аддедруќѓеѕ.сот/ќог-һесіппегѕ/Љєр-ѕаєиѕ-сойезѕ.) 


Код для проверки значения этих СВОЙСТВ выглядит так: 


Ғипсііоп һапа1еЅегуегКезѕропзѕе () { 
1Е ((гед.геаауѕёаіе == 4) && (гед.збаёиѕ == 200)) { 


Если свойства содержат требуемые значения, можно извлечь результаты из свойст- 
Ва геѕропѕеТехі объекта ХмініЕркедиеѕё. В нашем случае это свойство содержит 
сумму двух исходных чисел. Полученный результат отображается на странице 
(рис. 11.2) следующим кодом: 


уаг геѕиії = гед. гезропѕеТехі; 


аосиотепі .деїЕ1емепЕВу!а ("хези") .іппегнНтмі, = 
"Тре апзмег іѕ " + гезо1е + "."; 
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ЕЗЕЗЕБ=Е 
её) Һр:/Лосаіһо$/АѕКТһеегуег.Һті Юр- ӧх | б) 5% 59 
& АЗК Тһе Ѕегуег ња) 
Епѓег бмо питбегз: 34 46 


То аѕк {Не ѕегуег ќо ада ег, міоиё геѓгеѕһіпа Һе раде, сііск #һћіѕ 


Биќоп: | АзК ће Ѕегуег 


Тһе апѕмег 15 80. 


Рис. 11.2. Веб-сервер возвратил ответ, активировав функцию Јама$сгірі, 
которая отобразила полученный ответ на странице 


Объект хмінірвеаџезё не предполагает какого-либо конкретного типа запрашивае- 
мых данных. Название объекта содержит часть ХМІ. по той причине, что он был 
создан для работы с данными ХМГ, т. к. этот стандарт позволяет создавать удоб- 
ные логические пакеты структурированной информации. Но объект хмінєєркедџеѕё 
также используется для запросов простого текста (как в только что рассмотренном 
примере), /3ОМ-данных (см. разд. "Сохранение объектов" главы 9), данных НТМІ. 
(как в следующем примере) и данных ХМГ. В действительности, в настоящее вре- 
мя объект Хмінєєрвеаџеѕё используется намного чаще для работы с данными, от- 
личными от ХМГ, так что пусть его название не сбивает вас с толку. 


СОВЕТ 


Для функционирования страниц, содержащих серверный код, включая сценарии РНР, 
они должны быть размещены на веб-сервере. Чтобы избежать проблем с испытанием 
примеров в этой главе, запускайте их на сайте этой книги ћр://мм\.ргоѕеїесһ.сот/ 
ћіті5/. 


Получение нового содержимого 


Другой ситуацией, в которой можно использовать объект хмініеркеаџезё, будет за- 
грузка нового содержимого в страницу. Например, новостная статья может сопро- 
вождаться несколькими фотографиями, но одновременно отображается только одна 
из них. Чтобы отобразить другую фотографию, пользователь нажимает соответст- 
вующую кнопку, а ЈауаЅстірі-код получает ее и вставляет вместо предыдущей. Этот 
же способ можно использовать для показа изображений в слайд-шоу. 


Пример такого слайд-шоу показан на рис. 11.3. 


Для использования дизайна, подобного показанному на рис. 11.3, может быть не- 
сколько причин. При умелой реализации этот метод может позволить удерживать 
под контролем большие объемы содержимого, которое всегда готово для просмот- 
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Рис. 11.3. Содержимое этой страницы состоит из нескольких отдельных слайдов. 
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Неру Лоса оз СРипа/С Райс; Нат 
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Управление слайдами осуществляется щелчком по ссылке М№ехі или Ргеуіоиѕ, в результате чего 
загружается новое изображение со своей подписью. Запрос нового содержимого осуществляется 


посредством объекта ХМІНЕбрВеаџеѕё 
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ра, но не перегружает страницу. (Менее умелые руки могут применить этот метод 
для накрутки количества посещений своей страницы, заставляя посетителя выпол- 
нять несколько запросов, чтобы получить все требуемое содержимое.) 


Лучшим способом реализации страницы такого типа будет использование объекта 
ХМЬНЕЕрВесаезе. Таким образом, страница может запрашивать новое содержимое и 
обновлять только часть окна, не вызывая обновления всей страницы. А полные об- 
новления плохи тем, что расходуют трафик, вызывают мигание страницы и застав- 
ляют пользователя прокручивать страницу обратно вверх. Все это может казаться 
мелочами, но такие мелочи отличают профессиональные, отполированные страни- 
цы от неуклюжих любительских. 


Для создания примера, показанного на рис. 11.3, сначала нам нужно выделить 
место для динамического содержимого. Для этого мы используем элемент <а1у>, 
который создает нам рамку с золотистым обрамлением и двумя ссылками внизу: 


<аіу іа="ѕ1іае">С1іск Мехі ёо збагЕ +ће зром.</а1у> 
<а опс1іск="геёџгп ргеуіоиѕЅ1іае ()" ҺгеҒ="#">516; Ргеуіоцѕ</а>&прѕр; 
<а опс1іск="геёџогп пехЕ511ае()" ҺгеҒ="#">Мехі &9;</а> 


Ссылки вызывают функцию ргеуіоџѕѕііде () ИЛИ пехЕ511ае () в зависимости от на- 
правления просмотра слайдов. В обеих функциях используется счетчик, начальное 
значение которого равно 0, увеличивается до 5 и начинает новый цикл со значе- 
ния 1. Код функции пехёѕііде () выглядит следующим образом: 


уаг ѕ1іаеМотрег = 0; 


Ғопсёіоп пехёѕ1іае () { 
// Увеличиваем указатель слайдов. 
1Е (511іаеМотрег == 5) { 
ѕ1іаемотрег = 1; 
} е1зе { 
ѕ1іаемотрег += 1; 


// Вызываем функцию для показа слайда. 
аоТоМем511іае (); 


// Гарантируем, что ссылка не выполняет никаких действий. 
геіогп Еа1зе; 


} 


Код функции ргеуіоџѕѕііде () подобен функции для показа следующего слайда: 


Ғипсііоп ргеуіоизѕ1іае () { 
1Е (511ідеМотрег == 1) { 
ѕ1іаеМопрег = 5; 
} е1зе { 
ѕ1іаемотрег -= 1; 
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аоТоМем511ае (); 
геіогп Еа1зе; 


} 


Обе функции используют еще одну функцию, доТомем$11ае (), которая в действи- 
тельности и выводит новое изображение. Эта функция использует объект 
ХМІнЕєрВеаџеѕе, чтобы отослать запрос серверу для получения новой порции дан- 
НЫХ. 


Ключевой вопрос: откуда страница Сіџпе$1(еѕ.һёт] получает свои данные? Подходы 
к этому могут быть разные. Сложные решения могут вызывать какую-либо сервис- 
ную службу или сценарий РНР. Также новое содержимое может создаваться на ле- 
ту или извлекаться из базы данных. В этом же примере применяется низкотехноло- 
гичное решение, которое будет работать на любом веб-сервере — выполняется по- 
иск файла с указанным именем. Например, файл для первого слайда называется 
Сһпа81(еѕ1 5П4е.Выт, файл для второго изображения — Сіпа$іќеѕ2_ ѕіе.Һті, 
ит. д. Каждый такой файл содержит только небольшой фрагмент разметки (не для 
всей страницы). Например, разметка файла Сџпа$51ёеѕ5 5іае.һёті такая: 


<Ғідоге> 
<в2>И1 5109 Тгее</һ2> 


<Ғісдсарііоп>Маке а мізһ апа $055 а геа гірроп ир іпёо һе ргапсһеѕ оё 
$5153 Егее. ТЕ іё ѕііскѕ, сдооа Ғогіџпе тау амаіі.</ Ғісдсарёіоп> 


// Загадайте желание и бросьте красную ленту в ветви этого дерева. 


// Если она зацепится, вас ожидает удача. 
<іто згрс="иіѕһіпд ёкее.јрд"> 
</Е1чаге> 


Зная, где хранятся наши данные, мы можем с достаточной легкостью создать объ- 
ект ХМЬНЕЕрВеаиез+ для получения требуемого файла. Имя файла можно создать 
простой строкой кода, используя текущее значение счетчика. Полностью функция 
соТоМем51іае () для запроса и получения нового слайда выглядит так: 


уаг гед = пем ХМЬНЕЕрВеааез® (); 


Ғипсііоп аоТоМемб11ае() { 
1Е (үед != пи11) { 
// Подготавливаем запрос на файл слайда. 
геа.ореп ("СЕТ", "Сһіпаѕіёезѕ" + 511іаеМотрег + " ѕ1іде" + 
"рім", ёгиое); 


// Подключаем функцию для обработки данных слайда. 


геа.опгеаЧузк а есрапае = пем511аеВесе1уеа; 


// Отправляем запрос. 
геа.зепа (); 
} 


Последний шаг — это скопировать полученные данные в элемент <аіу>, который 
отображает текущий слайд: 
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Ғопсёіоп пемѕ$1іаеКесеіуеа () { 


1Е ((геа.геаауббаее == 4) && (геа. зѕіаёиѕ == 200)) { 
аосотепі .десЕ1етепЕВуТа ("ѕ1іае") .1ппехНТМЬ = гед. геѕропѕетТехі; 
} 
} 
СОВЕТ 


Чтобы придать этому примеру больше шика, изображения можно менять, используя 
эффект перехода. Например, новое изображение может постепенно проявляться, в то 
время как старое постепенно исчезает. Для реализации этого эффекта требуется 
ТОЛЬКО СВОЙСТВО орас1еу и небольшой сценарий ЧауаЗсйрь исполняющийся по тай- 
меру. (Описания классического подхода см. по адресу ћір://сІадпиї.сот/ѕапабох/ 
ітадеѓааеѕ.рһр, а описание подхода на основе стилей, использующего новую и еще 
не полностью поддерживаемую возможность переходов С$$3, см. здесь: 
ћр://сѕ53.бгааѕһамепїегргіѕеѕ.сот/сіїтд2/.) Это одно из достоинств динамических 
страниц, использующих объект ХМЬНЕЕрВеаиез — они могут полностью управлять 
способом представления содержимого. 


На этом обсуждение этого примера не заканчивается. В разд. "Управление истори- 
ей просмотров" главы 12 мы используем возможность НТМГ5 для управления ис- 
торией просмотров веб-страницы, чтобы изменять ОКІ в соответствии с текущим 
слайдом. Но сейчас мы перейдем к рассмотрению двух новых способов взаимодей- 
ствия с веб-сервером. 


Отправляемые сервером события 


Объект хмьнЕЕрвечиез+ позволяет веб-странице задать серверу вопрос и получить на 
него немедленный ответ. Но это обмен типа "один к одному" — после предостав- 
ления сервером ответа данный сеанс взаимодействия завершается. Веб-сервер не 
может повременить несколько минут и отправить странице другое сообщение с об- 
новленной информацией. 


Но некоторые типы веб-страницы могли бы извлечь пользу из более длительных 
сеансов взаимодействия с сервером. Возьмем, например, страницу биржевых коти- 
ровок на Соое Еіпапсе (ууүү.20091е.сот/йіпапсе). Если оставить это страницу от- 
крытой, то периодически мы будем видеть автоматическое обновление котировок. 
Другим примером будет новостная лента, например компании ВВС 
(уғуууу.Бре.со.ик/пеууѕ). Оставив эту страницу открытой, вы увидите, что в течение 
дня список передовиц периодически обновляется. Подобным образом доставляются 
новые сообщения в ящик поступающих сообщений любой программы электронной 
почты с веб-интерфейсом наподобие Ноїта1! (у\\.Войтай.сотл). 


Во всех этих примерах применяется метод, называющийся опросом (роШпе). Суть 
его состоит в том, что веб-страница периодически (например, каждые несколько 
минут) запрашивает у веб-сервера новые данные. Для реализации этого механизма 
обновления веб-страницы используется функция ЈауаЅсгірі зееТпеегуа1() или 
зеіТіпеоиё () (см. разд. "Простая анимация" главы 7), которая активирует код по 
истечении установленного периода времени. 
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Метод опроса является разумным решением, но иногда неэффективным. Во многих 
случаях это означает, что нужно вызывать веб-сервер и устанавливать новое под- 
ключение только для того, чтобы узнать, что ничего нового нет. Умножьте это на 
СОТНИ ИЛИ ТЫСЯЧИ посетителей, обращающихся К веб-странице одновременно, и это 
может вылиться в ненужную нагрузку на ваш веб-сервер. 


Одно из возможных решений этой проблемы — это использование отиравляемых 
сервером событий (ѕегуег-ѕепі еуепіѕ), что позволяет удерживать открытым под- 
ключение к веб-серверу. Веб-сервер может отправлять странице сообщения в лю- 
бое время, и при этом отсутствует необходимость постоянно отключаться и под- 
ключаться к серверу и исполнять один и тот же сценарий. (Но если в этом есть не- 
обходимость, то можно использовать и опрос, т. к. отправляемые сервером события 
поддерживают эту возможность.) Лучшее этой технологии в том, с какой лег- 
костью используется система отправляемых сервером событий, а также в том, что 
она работает на большинстве веб-хостов и исключительно надежная. Но это срав- 
нительно новая система с соответствующим уровнем поддержки в браузерах 
(табл. 11.1). 


Таблица 11.1. Поддержка браузерами системы отправляемых сервером событий 


Минимальная 6* 5 5 11 4 
версия 


*На момент написания этой книги доступны только ранние бета-сборки этой версии. 


ПРИМЕЧАНИЕ 


Если вы хотите воспользоваться заполнителем (роуй!), которым эмулирует отправ- 
ляемые сервером события посредством системы опроса, несколько хороших кандида- 
тов можно найти здесь: ИЁр:/туч!.сот/ро!уНИ$. 


В последующих разделах мы создадим простой пример, демонстрирующий ИСПОЛЬ- 
зование отправляемых сервером событий. 


Формат сообщений 


В отличие от объекта хмынеервесаез+, система отправляемых сервером событий не 
разрешает передавать данные в произвольном формате, а требует придерживаться 
простого, но установленного формата. Каждое сообщение должно начинаться тек- 
стом даѓа:, за которым следует собственно текст сообщения, а в заключение — по- 
следовательность символов перехода на новую строку, которая во многих языках 
программирования, включая РНР, состоит из символов \п\п. 


Вот пример текста сообщения: 


ааба: Это сообщение было отправлено вам веб-сервером. \п\п 
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Сообщение разрешается разбить на несколько частей. Для этого используется по- 
следовательность символов окончания строки, которая часто состоит из одной па- 
ры \п. Это облегчает отправку сложных данных, наподобие следующих: 


ааба: Это сообщение было отправлено вам веб-сервером. \п 
даа: Надеемся, вам оно понравится. \п\п 


Обратите внимание, что каждую часть сообщения нужно начинать текстом аака:, 
а все сообщение завершать признаком перехода на новую строку \п\п. 


Этот метод можно использовать даже для отправки данных в формате ЈЅОМ№М 
(см. разд. "Сохранение объектов" главы 9), что позволяет преобразовать текст 
в объект в один прием: 


ааба: {\п 

даба: "пеѕѕадеТуре": "ѕіаёиѕ0рааіёе", \п 
даба: "пеззадерака": "Могк іп Ргодгезз"\п 
ааба: }\п\п 


Вместе с данными сообщения веб-сервер может отправить однозначное идентифи- 
цирующее значение (используя префикс іа:) и время тайм-аута для подключения 
(используя префикс геёху:): 

іа: 495\һ 

гегу: 15000\һ 

даба: Это сообщение было отправлено вам веб-сервером. \п\п 


Веб-страница обращает внимание только на данные сообщения и игнорирует иден- 
тификатор сообщения и время тайм-аута. Этими подробностями занимается брау- 
зер. Например, прочитав предыдущее сообщение, браузер знает, если он потеряет 
подключение к веб-серверу, то должен попытаться подключиться повторно после 
15 000 мс (т. е. 15 секунд). При повторном подключении браузер также должен от- 
править номер идентификатора 495, чтобы сервер мог его распознать. 


ПРИМЕЧАНИЕ 


Веб-страница может потерять подключение к веб-серверу по множеству разных при- 
чин, включая кратковременный сетевой сбой или истечение времени ожидания дан- 
ных прокси-сервером. Если возможно, браузер будет пытаться восстановить подклю- 
чение автоматически, выждав по умолчанию 3 секунды. 


Отправка сообщений 
с помощью серверного сценария 


Зная формат сообщений, мы можем с легкостью создать серверный код для их от- 
правки. Опять же, для создания простого примера, который будет поддерживаться 
практически всеми веб-хостами, удобно использовать язык серверных сценариев 
РНР. На рис. 11.4 показана страница, которая получает регулярные сообщения от 
сервера. В данном случае сообщения предназначены просто для демонстрационных 
целей и содержат лишь текущее время на веб-сервере. 
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/ [3 Ѕегег-Ѕепё Еуепёѕ {Е 


Мем мер ѕегуег іте гесеімеа: 


Еапед ііѕепіпо Гог теѕѕадеѕ. 
М№еу мер ѕегуег іте гесеіуеа: 
Мем/ мер ѕегуег іте гесеіуеӣ: 
М№ем мер ѕегуег Чте гесеіуей: 
М№ем мер ѕегуег іте гесеімеа: 
М№еу мер ѕегуег ііте гесеіуеа: 


Сапе ііѕёепіпа Гог теѕѕадеѕ. 
М№ем мер ѕегуег іте гесеіуеа: 
М№еу мер ѕегуег іте гесеіуеа: 
М№еу мер ѕегуег іте гесеіуеа: 
М№ем мер ѕегуег іте гесеіуеа: 
М№еу мер ѕегуег іте гесеіуеа: 
Мем меһ вегуег Нте гесеімелд: 


+ С! (О 1осаіһоѕі/ѕегуегЕуепїѕ.һіті 


10:21:02 


№ Іопаег ііѕёепіпа Рог теѕѕадеѕ. 


10:21:08 
10:21:10 
10:21:12 
10:21:14 
10:21:16 


№ Іопаег іѕёепіпа ог теѕѕадеѕ. 


11:45:08 
11:45:10 
11:45:12 
11:45:14 
11:45:16 
11:45:18 


1 


ІУ 


ор Шѕїепіпо 
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Рис. 11.4. Когда эта страница находится в режиме прослушивания, она получает постоянный поток 


сообщений от веб-сервера — приблизительно одно сообщение каждые две секунды. 


Каждое сообщение добавляется в верх прокручиваемого списка, а табло внизу отображает время 
получения последнего сообщения 


ПРИМЕЧАНИЕ 


В данном примере время на веб-сервере единственно, что постоянно обновляется. 
Это хорошо служит целям демонстрации принципов работы системы отправляемых 
сервером событий. Но в настоящем приложении сообщения содержали бы что-то бо- 
лее ценное, например последние поступления для новостной ленты. 


Серверная часть этого примера просто информирует о текущем времени по регу- 
лярным интервалам. Весь код РНР для этого выглядит так: 


<?рһр 


Һеааег ("Сопёепё-Туре: бехі/еуепі-ѕёгеат") ; 


Һеааег ('Сасһе-Сопіго1: по-сасһе!'); 


// Запускаем бесконечный цикл. 
ао { 
// Получаем текущее время. 


ЅсоггепіТіте = аабе ("Һ:і:5" біте ()); 


// Отправляем полученное время в сообщении. 


есһо "Чафа: " . $сиггепЕТіте . РНР ЕО; 


есһо РНР ЕО; 
Ғ1иѕһ (); 
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// Ожидаем 2 секунды перед тем, как создавать новое сообщение. 
з1еер (2); 
} мһі1е (Егхае); 
?> 


В начале этого сценария устанавливаются два важных заголовка. Сначала М МЕ- 
типу присваивается значение бехі /еуепі-ѕігеат, что требуется стандартом для от- 
правляемых сервером событий: 


Һеааег ("Сопёепё-Туре: бехі/еуепі-ѕёгеат"); 


Потом веб-серверу (а также прокси-серверам) дается указание отключить кэширо- 
вание. Если этого не сделать, то сообщения могут прибывать в пакетах по нерегу- 
лярным интервалам. 


Һеааег ('Сасһе-Сопіго1: по-сасһе!'); 


Остальная часть кода состоит из бесконечного цикла (или, по крайней мере, ис- 
полняющегося до тех пор, пока не исчезнет клиент). При каждом исполнении 
цикла встроенная функция Е1те() получает текущее время (в формате 
часы:минуты: секунды) и присваивает это значение переменной $сиггереТлие: 


$сиггепЕТлме = даіе ("Һ:1:5", іёітме()); 


Далее эта информация используется для создания сообщения в правильном форма- 
те, которое потом отправляется посредством команды есћһо. В данном примере со- 
общение состоит из одной строки, начинающейся текстом даба:, за которым сле- 
дуют данные времени. Сообщение завершается константой рнр ок, которая пред- 
ставляет комбинацию символов \п, обозначающих конец строки: 


есһо "даа: " . $сиггепеТ1ие . РНР ЕО; 
еспо РНР ЕО; 


ПРИМЕЧАНИЕ 


Если этот код выглядит несколько странно, так это, наверное, потому, что в РНР для 
конкатенации строк используется оператор в виде точки (.). Этот оператор работает 
таким же образом, как и оператор в виде знака "плюс" (+) с текстом в Јауа$сгірі, толь- 
ко его нельзя случайно перепутать с операцией математического сложения. 


Функция ғ1оѕһ () обеспечивает немедленную отправку данных, а не помещение их 
в буфер для отправки после завершения выполнения кода РНР. Наконец, функция 
ѕ1еер() приостанавливает исполнение кода на две секунды, после чего начинается 
исполнение новой итерации цикла. 


СОВЕТ 


Если установить слишком большое время между сообщениями, прокси-сервер (сер- 
вер, который расположен между веб-сервером и компьютером клиента и управляет 
трафиком) может разорвать подключение. Чтобы предотвратить это, можно отправ- 
лять незначащее сообщение в виде символа комментария (простое двоеточие — :) 
без текста приблизительно каждые 15 секунд. 
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Обработка сообщений в веб-странице 


Создание веб-страницы для обработки отправляемых сообщений даже проще, чем 
кода для отправки этих сообщений. Блок <оау> страницы разделяется на три блока 
<аіу> — один для окна списка сообщений, другой для табло для отображения 
текущего времени и один для кнопок запуска и остановки процесса: 


<аіу іа = "теѕѕаде1од"></аіу> 
<аіу іа = "ёітеріѕр1іау"></аіу> 


<аіу іа="сопіго1зѕ"> 
<роёёоп опсііск=" зёагі1ізѕіепіпа () ">5ёагі 1іѕёепіпа</роёёоп><рг> 
<риоёёоп опс1іск="зёор1ізёепіпо () ">5іор 1ізѕёепіпа</роёёоп> 

</аіу> 


При загрузке страница находит элементы пеѕѕадеІод и &1тер1зр1ау И сохраняет их 
в глобальных переменных, что обеспечивает всем нашим функциям легкий доступ 
К НИМ: 


уаг пеѕзаде1од; 
уаг іітерізр1ау; 


міпаои.оп1оаа = Ёопсііоп () { 


пеѕѕаде1од = досопепіё.деёЕ1ІетепіВута ("теѕзаде1од"); 


імерізр1ау = аосиотепі .деїЕ1етепЕВу1а ("ёімеріѕр1ау"); 
}; 


Процесс отправки сообщений веб-сервером и получения их страницей начинается 
нажатием кнопки Эф агё 1іѕќепіпо. В это время код создает новый объект 
ЕуепіЅѕоџгсе, предоставляя ОКІ серверного ресурса, который будет отправлять со- 
общения. (В данном примере это РНР-сценарий ТітеЕуепіѕ.рһр.) Потом к событию 
опМеззаае подключается функция зкахЕТ15ееп1па (), которая срабатывает при каж- 
дом получении сообщения страницей: 


уат ѕоогсе; 


Ғипсііоп зёагі1ізёепіпд() { 


зоигсе = рем Еуепібоцогсе ("ТітеЕуепіѕ.рһр"); 


зоигсе.опмеззаае = гесе1уеМеззаде; 
пеззаде10од.іппегнНтмі += "<рг>" + "Ѕіагёеа 1іѕіепіпд Еог пеззадез."; 


СовеТ 


Выяснить, поддерживает ли веб-сервер систему отправляемых сервером сообщений, 
можно, выполнив проверку на существование свойства ті падом .ЕуепёЅоџгсе. Если 
это свойство не существует, то нужно будет прибегнуть к резервному решению. На- 
пример, можно использовать объект ХМмтНЕЕрВеаиез+, чтобы периодически обращать- 
ся квеб-серверу для получения данных. 


388 Часть ІІ. Создание интеллектуальных веб-приложений 


Сообщение можно получить из свойства даа объекта еуепё при активировании со- 
бытия кесе1уеМеззаде. В данном примере свойство даба добавляет новое сообщение 
в список сообщений и обновляет табло часов: 


Ғипсііоп гесеіуеМеѕзаде (е) { 


пеѕзаде1од.іппегнтмі += "<рг>" + "Мен мер зегуег ще гесеіуеа: " + 
е.дӢаѓа; 


бітерізр1ау.іппегнтмі = е.ааѓа; 
} 


Обратите внимание, что из сообщения удалена вся служебная информация (текст 
даба: и признак перехода на новую строку /п/п), и отображается только требуемое 
содержимое. 


Наконец, прослушивание событий сервера страницей можно прекратить в любое 
время, вызвав метод с1озе () объекта еуепе5оиксе. Делается это так: 


Ғипсііоп зіёорІізіепіпа () { 
зоцџгсе.с1озе (); 
пеѕзаде1од.іппегнтмі += "<рг>" + "Мо Іопдег 1іѕіепіпд Еог пеззадез."; 


Опрос посредством серверных событий 


В предыдущем примере мы рассмотрели наиболее простое использование системы 
серверных событий, которое, по большому счету, сводится к следующему: страни- 
ца отправляет запрос, подключение остается открытым, и сервер периодически от- 
правляет странице информацию. Браузеру может потребоваться выполнить по- 
вторное подключение (что он делает автоматически), но только в случае проблемы 
с подключением или же если оно было временно прервано по другим причинам 
(например, с целью экономии заряда батареи на мобильном устройстве). 


Но что произойдет, если прекратится исполнение сценария на веб-сервере, и по- 
следний закроет подключение? Довольно интересно, хотя отключение выполняется 
не вследствие неполадок, а в результате целенаправленных действий веб-сервера, 
веб-страница автоматически возобновляет подключение (после ожидания, по умол- 
чанию равному 3 секундам) и снова запрашивает данный сценарий, начиная его 
исполнение с самого начала. 


Это поведение можно обернуть в свою пользу. Допустим, что мы создали сравни- 
тельно небольшой серверный сценарий, который отправляет только одно сообще- 
ние. Теперь действия веб-страницы похожи на действия при опросе (см. разд. "От- 
правляемые сервером события" ранее в этой главе) в том, что она периодически 
восстанавливает подключение. Разница состоит лишь в том, что период между под- 
ключениями устанавливается веб-сервером, а не ЈауаЅсгірі-кодом страницы, как 
делается при использовании традиционного опроса. 


В следующем примере используется комбинированный подход. Серверный сцена- 
рий удерживает подключение открытым и периодически отправляет сообщения В 
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течение | минуты. Потом сценарий дает указание браузеру подключиться 


2, минуты и закрывает подключение: 


<?рһр 


Һеааег ("Сопёепё-Туре: бехі/еуепі-ѕёгеат"); 


Һеааег ('Сасһе-Сопіго1: по-сасһе!'); 


// Указываем браузеру ожидать 2 минуты после закрытия подключения, 


// прежде чем подключаться опять. 
есһо "гегу: 120000" . РНР ЕО1; 


// Сохраняем время начала. 
ЅзёагіТітме = Ее (); 


ао { 
// Отправляем сообщение. 
$сигкепЕТлие = абе ("Һ:і:5", біте ()); 


есһо "даа: " . $сиггепЕТіте . РНР ЕО; 


есһо РНР ЕОГ; 
Ғ1иѕһ (); 


// Если прошла минута со времени начала сценария, 


// его исполнение. 
1Е ((бітме() — Ѕ$ѕбагёТітме) > 60) { 
аіе (); 


// Ожидаем 5 секунд и отправляем ново 


ѕІеер (5); 
} мһі1е (Егхае); 
?> 


завершаем 


389 


через 


Теперь при просмотре страницы мы будем получать регулярные сообщения в тече- 
ние 1 минуты, после чего следует перерыв в 2 минуты, после чего процесс повторя- 
ется (рис. 11.5). В настоящем приложении при закрытии подключения веб-сервер 
может отправить браузеру специальное сообщение, информирующее, что больше 
нет причин ожидать обновленные данные (например, потому что фондовые биржи 
закрылись). Тогда веб-страница могла бы прекратить процесс, вызвав метод 


с1озе () объекта Буепіѕоџгсе. 


ПРИМЕЧАНИЕ 


В случае сложных серверных сценариев автоматическое повторное подключение 
браузера может работать не совсем так, как ожидалось. Например, подключение мо- 
жет быть прервано посредине исполнения веб-сервером какой-либо задачи. В таком 
случае серверный сценарий может отправить всем клиентам идентификатор (см. по- 
следние два абзаца разд. "Формат сообщений" ранее в этой главе), который браузер 
вернет серверу при повторном подключении. Но ответственность за создание подхо- 
дящего идентификатора, отслеживание соответствия каждого идентификатора с его 
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задачей (например, сохраняя определенную информацию в базе данных), а потом по- 
пытку возобновить процесс с того момента, когда он был прерван, лежит на сервер- 
ном коде. А все эти задачи могут быть очень проблематичными, если ваши навыки ко- 
дирования не на высшем уровне. 


ЕЕЕ 
[3 Ѕегег-Ѕепё Еуепёѕ {ЕЭ 
< С О 1осаіһоѕі/ЅегуегЕуепїѕ.һїіті аб 
Ѕғайеа іѕёепіпа Гог теѕѕадеѕ. ^ 


№ ем мер ѕегуег Чите гесеіуеӣ: 01:49:03 
№ ем мер ѕегуег біте гесеіуеӣ: 01:49:08 
№ ем мер ѕегуег Чите гесеіуеӣ: 01:49:13 
№ м мер ѕегуег іте гесемеа: 01:49:18 
№ ем мер ѕегуег Чите гесеіуеӣ: 01:49:23 
№ ем мер ѕегуег Чите гесеіуеӣ: 01:49:28 
№ м мер ѕегуег іте гесеіуеӣ: 01:49:33 
№ ем мер ѕегуег Чите гесеіуеӣ: 01:49:38 
Мем мер ѕегуег Чите гесеіуеа; 
Мем мер ѕегуег іте гесеіуеа; 
№ м мер ѕегуег Чте гесеіуеа; 
Мем мер ѕегуег Чте гесеіуеа; 
Мем мер ѕегуег Чте гесеіуеа; 
Мем мер ѕегуег Чте гесемед: 
М ем мер ѕегуег Чите гесеіуеӣ: 01:52:08 
М ем меб ѕегуег бте гесеіуеӣ: 01:52:13 


| Зап Изепта 
| Ѕїор Шѕїепіпо 


Рис. 11.5. В этой странице используется комбинация отправки потоковых сообщений (в течение одной 
минуты) и опроса (выполняемого в течение двух минут после завершения потоковой части). 
Такой подход удобен, когда требуется свести к минимуму трафик веб-сервера, в зависимости от частоты 
обновления данных и от того, насколько важно иметь самые свежие данные 


Веб-сокеты 


Серверные события являются идеальным инструментом, когда требуется получить 
последовательность сообщений с веб-сервера. Но при этом связь получается пол- 
ностью односторонней. Браузер не может отвечать на сообщения или вступать 
в более сложный диалог с сервером. 


Если вы создаете веб-приложение, в котором требуется серьезное двустороннее 
взаимодействие браузера с веб-сервером, лучшим подходом к его реализации (не 
прибегая к помощи Еаѕћ) будет, возможно, использование объекта хмынеЕрВеаиез+. 
В зависимости от типа создаваемого приложения этот подход может работать так, 
как требуется. Но здесь существует и достаточное количество возможных проблем. 
Прежде всего, объект хмтнеерВеачиез* не очень хорошо подходит для быстрого об- 
мена множественными сообщениями (например, в чате). Потом, в нем нет возмож- 
ности связать один вызов с другим, поэтому при каждом новом запросе от веб- 
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страницы сервер должен вычислять с самого начала, кому эта страница принадле- 
ЖИТ. Поэтому уровень сложности кода для обработки ряда связанных запросов от 
веб-страницы может очень быстро вырасти до практически нереализуемой. 


Для всех этих проблем есть решение, хотя оно еще не вполне готово. Этим решени- 
ем является технология веб-сокетов (меб ѕосКеѓѕ), которая позволяет браузеру 
удерживать открытое подключение к серверу и обмениваться сообщениями в тече- 
ние любого требуемого времени. Технология веб-сокетов вызвала большое возбуж- 
дение в среде веб-разработчиков, но она еще находится в процессе развития и не 
имеет хорошего уровня браузерной поддержки. Изначально поддержка веб-сокетов 
была добавлена в браузеры Епех 4 и Орега 11, но была удалена через несколько 
месяцев в связи с проблемой потенциальных нарушений безопасности. Но эту воз- 
можность планируется снова ввести в Епех 6, используя доработанную версию 
первоначального протокола; также она будет, скорее всего, снова добавлена в бу- 
дущие версии Орега. Корпорация Мисгозой еще не приняла никаких твердых реше- 
ний, но публично экспериментирует с этой возможностью (вы можете испытать ее 
сами в тестовой лаборатории по адресу ВИр://Итуш].с0от/3577772). 


В связи с этими постоянными изменениями в стандарте веб-сокетов, о нем трудно 
сказать что-либо определенное. Более того, для него даже не приводится таблица 
браузерной поддержки, как для других возможностей, т. к. разные версии браузе- 
ров поддерживают различные версии этого стандарта, которые обычно несовмес- 
тимы друг с другом. Это означает, что сервер веб-сокетов, предназначенный для 
работы с одной версией веб-сокетов, не будет работать с браузерами, поддержи- 
вающими другую. 


ПРИМЕЧАНИЕ 


На данный момент лучше всего тестировать страницы, использующие веб-сокеты, 
в браузере Сһготе, который предоставляет наиболее последовательную поддержку 
для них. Можно также попробовать Еігеїох, если сможете найти бета-версию Егеох 6. 
(Технически можно включить поддержку сокетов в более ранних версиях Етеюх, 
используя скрытый параметр. Но эта функциональность довольно неуклюжа и исполь- 
зует устаревшую версию стандарта веб-сокетов, так что вряд ли с ней стоит моро- 
читься. ) 


Получение доступа к веб-сокетам 


Если вы добрались до этих строк, то знаете, что вас не испугают возможности на- 
столько новые, что их стандарт еще не был полностью определен, а они сами пол- 
ностью не реализованы в браузерах. Но вопрос заключается в том, сколько времени 
вам следует затратить на изучение веб-сокетов в настоящее время, иными словами, 
насколько хороши перспективы, что они выльются в Ценную возможность веб- 
программирования в будущем, и следует ли ожидать, что через год или два их 
можно будет использовать в своих веб-приложениях? 


Прежде чем ответить на этот вопрос, вам нужно понять две важные вещи. Пер- 
вая — веб-сокеты являются специализированным инструментом. Они актуальны 
для таких приложений, как чат, массивные многопользовательские игры или инст- 
румент для пирингового взаимодействия. Веб-сокеты позволяют создавать новые 
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типы приложений, но применять их в большинстве современных веб-приложений, 
движимых /ауазспрь, скорее всего, не имеет смысла. 


Вторая — решения на основе веб-сокетов могут быть чрезвычайно сложны. Разра- 
ботать Јауа$Ѕсгірі-код для одной страницы будет достаточно простой задачей. Но 
для создания серверного приложения вам потребуются бешеные знания и навыки 
программирования, включая понимание концептов многопотоковости и сетевого 
взаимодействия. 


Для использования веб-сокетов на веб-сервере вашего сайта должна исполняться 
специальная программа, которая будет, как ожидается, называться сервером веб- 
сокетов. На эту программу возлагается ответственность за координирование взаи- 
модействия всех участников, и после запуска она работает безостановочно. 


ПРИМЕЧАНИЕ 


Многие хостинговые компании не допускают долго работающих программ, если только 
вы не оплатите выделенный веб-сервер, т. е. сервер, обслуживающий лишь ваш сайт. 
Если у вас обычный общий хостинг, вы, скорее всего, не сможете размещать на нем 
страницы, в которых используются веб-сокеты. Даже если вы умудритесь запустить 
сервер веб-сокетов и удерживать его в рабочем состоянии, владелец вашего хостин- 
га, скорее всего, выявит и выключит его. 


Чтобы дать вам представление о масштабе сервера веб-сокетов, рассмотрите неко- 
торые из задач, которые сервер сокетов должен выполнять: 


П составить "словарь" сообщений, иными словами, решить, какие типы сообщений 
являются допустимыми, а какие — нет; 


О содержать список всех текущих подключенных клиентов; 


П выявлять ошибки при отправке сообщений клиентам и прекратить попытки свя- 
заться с ними, если кажется, что их больше не существует; 


О обрабатывать все данные в оперативной памяти, т. е. Данные, доступ к которым 
может потребоваться всем клиентам, и делать это надежно и безопасно. Здесь 
имеется обилие возможных неявных проблем, например, когда один клиент пы- 
тается присоединиться к обмену, в то время как другой отключается, а инфор- 
мация об обоих хранится в одном и том же объекте в памяти. 


Разработчики, скорее всего, никогда не будут сами создавать серверную програм- 
му, использующую веб-сокеты, т. к. это просто-напросто не стоит требуемых для 
этого значительных усилий. Самым легким подходом в этой области будет устано- 
вить чей-то другой сервер веб-сокетов и разрабатывать свои веб-страницы под не- 
го. Так как использование части ЈауаЅсгірі стандарта веб-сокетов не несет трудно- 
стей, это не должно доставлять каких-либо проблем. Другим подходом будет взять 
чей-либо код сервера веб-сокетов и подогнать его под свои требования. В настоя- 
щее время существует великое множество проектов (многие из которых бесплат- 
ные и с открытым кодом), в которых разрабатываются серверы веб-сокетов для ре- 
шения различных задач, на разных языках серверного программирования. Подроб- 
ности см. во врезке "Практические занятия для опытных пользователей. Серверы 
веб-сокетов" в конце этой главы. 
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Простой клиент веб-сокетов 


С точки зрения веб-страницы функциональность веб-сокетов легко понять и ис- 
пользовать. Первый шаг — это создать объект нерѕоске+ и передать ему ОВГ. Код 
для этого подобно следующему: 


уаг зоскеЕ = пем Меббоскее ("мз : / /1оса1Һоѕё/ ѕзоскеёЅегуег.рһр"); 


Строка ОКІ начинается с текста из://, который идентифицирует подключение ти- 
па веб-сокет. Этот ОВГ, указывает файл веб-приложения на сервере (в данном слу- 
чае это сценарий ѕосКеіЅегуег.рһр). Стандарт веб-сокетов также поддерживает ОВГ, 
которые начинаются с текста изз://, что указывает на требование использовать 
безопасное, зашифрованное подключение (точно так же, как и при запросе веб- 
страницы указывается ОКІ, начинающийся с веЕрз:// вместо веер: //). 


ПРИМЕЧАНИЕ 


Веб-сокеты могут подключаться не только к своему веб-серверу. Веб-страница может 
открыть подключение к серверу веб-сокетов, исполняющемуся на другом веб-сервере, 
не требуя для этого никаких дополнительных усилий. 


Само обстоятельство создания объекта иерѕоскеє понуждает страницу пытаться 
подключиться к серверу. Дальше надо использовать одно из четырех событий объ- 
екта йерѕоскеё: опореп (при установлении подключения), опеггог (когда возникает 
ошибка), опс1оѕе (при закрытии подключения) и опмеѕзаде (когда страница получа- 
ет сообщение от сервера): 


ѕоскеё.опореп = соппесііопОреп; 


зоскеё.оппеѕѕасде = пезѕасдеКесеіуеа; 
зосКкеі.опеггог = еггогОссоггеа; 


зоскеё.опореп = соппесЕ1опС1озеа; 


Например, в случае успешного подключения неплохо бы отправить соответствую- 
щее подтверждающее сообщение. Такое сообщение доставляется с помощью мето- 
да зепа() объекта иеБЗоскее, которому в качестве параметра передается обычный 
текст. Далее приведена функция, которая обрабатывает событие опореп и отправля- 
ет сообщение: 


Ғипсііоп соппесііопОреп () { 


зоскеё . зепа ("ОѕегМапе: јеггуСгааіуо23@стаі1. сот"); 


} 
Предположительно, веб-сервер получит это сообщение и даст на него ответ. 


События опЕггог И опС1озе можно использовать для отправки извещений посетите- 
лю веб-страницы. Но безоговорочно самым важным является событие опмеззаде, 
которое срабатывает при получении новых данных от сервера. Опять же, код 
Јауа$сгірі для обработки этого события не представляет никаких сложностей — мы 
просто извлекаем текст сообщения из свойства дата: 


Ғипсііоп пеѕѕасдеКесеіуеа (е) { 
пеѕзасде1од.іппегнНтТмі += "<рг>" + "Меззаде гесеіуеа: " + е.Чафа; 
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Если веб-страница решит, что вся ее работа выполнена, она может закрыть под- 
ключение, используя метод а1зсоппесе (): 


зоскеё.аізсоппесі+ (); 


Из этого обзора веб-сокетов можно видеть, что использование сервера веб-сокетов 
стороннего разработчика не представляет никаких трудностей — нам нужно лишь 
знать, какие сообщения отправлять, а какие — ожидать. 


ПРИМЕЧАНИЕ 


Чтобы заставить подключение веб-сокетов работать, выполняется большой объем 
работы за кулисами. Прежде всего, веб-страница устанавливает связь по обычному 
стандарту НТТР. Потом это подключение нужно повысить до подключения веб- 
сокетов, позволяющего свободную двустороннюю связь. На этом этапе возможны 
проблемы, если между компьютером клиента и веб-сервером находится прокси- 
сервер (как, например, в типичной корпоративной сети). Прокси-сервер может отка- 
заться сотрудничать и разорвет подключение. Эту проблему можно решить, обнару- 
живая неудачное подключение (посредством события опЕггог объекта їерѕоскеїб) и 
применяя один из заполнителей (роіуїііѕ) для сокетов, описанных на веб-сайте СИНУБ 
(ИНр:/Атуи!.сот/ро!УНИ$). Эти заполнители применяют метод опроса, чтобы эмули- 
ровать подключение веб-сокетов. 


Примеры веб-сокетов в сети 


Если вы заинтересованы опробовать веб-сокеты, в сети есть много сайтов, на кото- 
рых можно запустить свою разработку. 


Для начала попробуйте сайт ћёќр://ууерѕосКкеѓ.ого/есһо.һёті, который предоставля- 
ет простейший сервер веб-сокетов: веб-страница отправляет ему сообщение, а он 
возвращает это же сообщение веб-странице (рис. 11.6). 
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Рис. 11.6. Сервер веб-сокетов, который просто отправляет назад полученные сообщения, не выиграет 
никаких призов за инновационные разработки в программном обеспечении. Но он дает возможность 
убедиться, насколько легко взаимодействовать с готовым сервером веб-сокетов 
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Хотя этот сервер веб-сокетов и не представляет ничего особенного, на нем вы мо- 
жете испробовать все возможности объекта меьбоскек. Более того, к этому серверу 
можно подключиться со страницы, расположенной как на промышленном веб- 
сервере, так и на тестовом веб-сервере на вашем компьютере, или даже со страни- 
цы, просто запускаемой с жесткого диска. 


Существуют и серверы веб-сокетов, предоставляющие другие возможности, вклю- 
чая следующие. 


С Простой чат. Чат, в котором все разговаривают со всеми. Отправляемые сооб- 
щения получают все участники чата. Находится по этому адресу: 
Һер:/Љћеті5детоѕ.сот/уер-ѕосКеёќ. 


П Многопользовательский альбом. Эта страница объединяет веб-сокеты с хол- 
стом НТМІ 5. То, что вы рисуете на своем холсте, отображается на холсте дру- 
гих участников, и наоборот. Простой концепт, но очень впечатляющий на прак- 
тике. Находится по этому адресу: ћїр://тгаооБ.сот/ргојесіѕ/тийџѕеграа. 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
Серверы веб-сокетов 


Чтобы иметь возможность испытать свой проект по веб-сокетам, вам нужен сервер 
веб-сокетов, с которым ваша страница могла бы общаться. Хотя рассмотрение кода 
сервера веб-сокетов (объемом, по крайней мере, в несколько десятков строк) выходит 
за рамки этой книги, тестовый сервер можно найти во многих местах. 


Среди прочих, можно порекомендовать следующие. 


• РНР. Этот простой и слегка сыроватый проект будет хорошей отправной точкой 
для создания сервера веб-сокетов на РНР. Загрузить его можно здесь: 
ћіїр://соде.доодіе.сот/р/рһрмебѕоскеї. 


• Вибу. Существует несколько образцов сервера веб-сокетов на Рибу, но этот, при- 
меняющий модель "ЕуепЕ — Масһіпе", пользуется особенной популярностью. За- 
грузить его можно здесь: ћїр://9#һир.сот/ідгідогік/ет-мерѕоскеї. 


» РуШоп. Сервер веб-сокетов в виде модуля расширения для Араспе на языке 
Руіћоп. Загрузить его можно здесь: Ийр://соде.доод!е.сот/р/румебзоскет. 


• „МЕТ. Назвать простым этот всеохватывающий проект нельзя. Но он содержит за- 
вершенный сервер веб-сокетов на языке С# на основе платформы .МЕТ корпора- 
ции МісгоѕойЁ. Загрузить его можно по адресу ћїр://ѕирегмерѕоскеї.сойеріех.сот. 


• Јауа. По своему масштабу этот проект похож на проект .МЕТ, но чисто на языке 
Јаха. Загрузить его можно здесь: Һір://јмерѕоскеї.ога. 


• поде./$. В зависимости от того, кого вы спросите, система поде.ЈЅ для разработки 
веб-приложений на УауаЗсйр{ — это либо одна из наиболее перспективных плат- 
форм, либо просто разросшийся тестовый инструмент. В любом случае, сервер 
веб-сокетов для этой платформы можно загрузить здесь: Һїр://дйһиб.сот/ 
тікѕадо/поде-мерѕоскеї-ѕегчег. 


• Каагіпд. В отличие от других пунктов этого списка, Каагіпо не предоставляет кода 
для сервера веб-сокетов. Это развитый сервер веб-сокетов, который можно лицен- 
зировать для своего веб-сайта. Для разработчиков, которые предпочитают делать 
все своими руками, он не будет представлять интереса. Но удобно использовать 
его на менее амбициозных веб-сайтах, особенно принимая во внимание то обстоя- 
тельство, что он содержит встроенную поддержку резервных решений в своих кли- 
ентских библиотеках (которые сначала пытаются применить стандарт веб-сокетов 
НТМІ5, затем Назй, а потом опрос посредством сценариев на Јауа$сгірі). Допол- 
нительную информацию см. здесь: ћір://каагіпд.сот/ргоаисїѕ/ћітіІ5-еайќіоп.һіті. 


ГЛАВА 12 


Несколько полезных 
возможностей на Јауа$сгірі 


На данный момент мы рассмотрели все ключевые темы НТМІ5. Мы применили 
возможности этого стандарта для написания более значащей и лучше структуриро- 
ванной разметки, познакомились с его расширенными графическими функциональ- 
ностями, такими как видео и динамическое рисование, а также применили их для 
создания самодостаточных страниц, движимых Јауа$сгірї, которые могут продол- 
жать работать даже при отсутствии подключения к Интернету. 


В этой главе мы рассмотрим еще три возможности, которые представляют значи- 
тельный интерес. Подобно большей части уже рассмотренного материала, эти воз- 
можности расширяют диапазон функциональностей веб-страницы, и все это по- 
средством небольшого объема кода ЈауаЅстірї. Далее перечислены темы, которые 
нам предстоит изучить. 


СО Геолокация. Хотя эта возможность часто рассматривается как часть НТМГ5, 
в действительности геолокация является отдельным стандартом, который ни- 
когда не был в ведении группы \УНАТУ/С (см. разд. "НТМІ5: возвращение 
к жизни" главы 1). Но подобно многим другим возможностям НТМТ.5 геолокация 
позволяет создавать более мощные веб-страницы с помощью кода ЛауаЗспрь. 
В частности, используя геолокацию, можно получить довольно важную инфор- 
мацию: географические координаты посетителя страницы. 


П Фоновые вычисления. По мере того как веб-разработчики создают более ин- 
теллектуальные страницы, для которых применяются все большие объемы кода 
Тауабспрь очень важно исполнять определенные задачи в фоновом режиме тихо, 
не привлекая внимания, и в течение длительного периода времени. Для решения 
этой задачи можно было бы использовать таймеры и другие приемы, но воз- 
можность фоновых вычислений предполагает более удобное решение. 


П История сеансов. В старые добрые времена веб-страница выполняла одну зада- 
чу — отображала содержимое. В результате посетителям приходилось тратить 
много времени, щелкая по ссылкам, чтобы перейти с одного документа на дру- 
гой. Но сегодня снабженная Јауа$сгірі-кодом страница может загружать содер- 
жимое с другой страницы, не вызывая при этом полного обновления. Таким об- 
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разом, ЈауаЅсгірі позволяет создать более плавное зрительное восприятие стра- 
ницы посетителем. Но добавление этой возможности также доставляет новые 
проблемы, такие как, например, необходимость синхронизации ОКІ с текущим 
содержимым. Веб-разработчики применяют множество продвинутых методов, 
чтобы содержать свои приложения в порядке. Теперь НТМГ5 предоставляет 
средство для работы с историей сеансов, которое готово помочь им с этой зада- 
чей (по крайней мере, иногда). 


ПРИМЕЧАНИЕ 


По мере углубления в изучение этих трех возможностей мы получим еще лучшее 
представление о размахе стандарта НТМІ5. То, что вначале выглядело как просто 
несколько хороших идей, втиснутых в слишком амбициозный стандарт, переросло во 
множество новых возможностей, решающих целый диапазон разных задач, и все это 
удерживается вместе с помощью всего лишь нескольких ключевых концептов (таких 
как семантика, Јауа$сгірї и С$$3). 


Геолокация 


Геолокация позволяет определять географическое местоположение посетителей 
веб-сайта. И это не означает просто страну или даже город, в котором находится 
посетитель. Геолокация может сузить информацию о местоположении человека к 
городскому кварталу или даже определить его точные координаты, если он зашел 
на страницу со смартфона. 


Все основные браузеры предоставляют хороший уровень поддержки геолокации 
(табл. 12.1). 


Таблица 12.1. Браузерная поддержка возможности геолокации 


Минимальная 
версия 


Тем не менее в этой поддержке есть слабые места в виде старых версий Пщегпе! 
Ехр|огег, таких как [Е 7 и ІЕ 8. Одним из способов предоставить поддержку геоло- 
кации в этих версиях ІЕ будет создать резервное решение, использующее Сооз]е 
Сеагѕ (В@р://соде.гоофе.сот/ар!5/2еаг5). Проект СооеІе Сеагѕ был разработан до 
НТМЕ5 и нацелен на предоставление многих из одинаковых с этим стандартом 
возможностей, включая подобную систему геолокации. Хотя проект Соое Сеагѕ в 
настоящее время не рекомендуется к использованию (в Соое прекратили работать 
над ним и не предоставляют поддержки для новых версий браузеров), он сгодится 
для старых версий обозревателей. Недостаток этого подхода состоит в том, что, как 
и все подключаемые модули, модуль Соое Сеагз должен быть установлен на ком- 
пьютере посетителя. Если на компьютере не установлен модуль бооев/е Сеагѕ, мож- 
но использовать модуль Сһготе Егате (см. врезку "Малоизвестная или недооценен- 
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ная возможность. Модифицирование ІЕ с помощью Соофе Сйтоте Еғате" в конце 
главы 1), или же просто запросить посетителей ввести свое местонахождение. 


ПРИМЕЧАНИЕ 


Большинство новых возможностей уауа$сир\, которые мы рассмотрели в этой книге, 
были частью первоначальной спецификации НТМЕ5, а потом были отделены, когда 
спецификацию передали в ведение организации \ҮЗС. Но геолокация никогда не была 
частью НТМІ5, а просто полностью сформировалась приблизительно в то же самое 
время. Но почти все рассматривают эту возможность вместе с возможностями НТМІ5, 
как часть одной большой волны будущих технологий. 


Принцип работы геолокации 


Возможность геолокации вызывает довольно много вопросов у людей, которых 
обычно нельзя назвать параноиками. Например, каким образом может какое-то 
программное обеспечение знать, что я не болею, как я сказал своему начальнику, а 
смотрю футбол в кафе? В нем что, есть какой-то скрытый код, который отслежива- 
ет все мои действия? Интересно, что это за фургон там на улице и те люди, которые 
прикидываются, будто бы они меняют колесо? 


К счастью, возможность геолокации не из разряда страшилок о слежке. Это пото- 
му, что даже если браузер может вычислить ваше местонахождение, он не сообщит 
его веб-сайту без вашего явного на то разрешения (рис. 12.1). 


| "= | ЕЗ5 
[_] НТМІ5 ето: деоюсаноп | + | = 
4 _]| Һер://Һті5 детоѕ.сот/део - са. ЕЗ: 


ПА 


Һті5детоѕ.сот мапі їо Кпом/ уоиг 
1осаНоп. 


Е еагп Моге... Ѕһаге [осаНоп | 


Аһауѕ Ѕһаге 


Меуег Ѕһаге 


х Мої Мом 


Рис. 12.1. Веб-страница хочет получить данные о местоположении посетителя. Посетитель может 
разрешить всегда предоставлять эти данные (Аімауѕ Ѕћһаге), предоставить их только в этот раз 
(Ѕһаге ГосаНоп) или же никогда не предоставлять их (Меуег Ѕһаге). Такое поведение браузера Еігеѓох 
не является собственной инициативой его разработчиков, а официальным правилом стандарта 
геолокации, требующим, чтобы каждый веб-сайт, пытающийся получить данные о местоположении 
посетителя, получил для этого его разрешение 


Глава 12. Несколько полезных возможностей на Лама сп рЕ 399 


Чтобы вычислить местоположение посетителя, браузер заручается помощью по- 
ставщика услуг определения местоположения (Іосайоп ргоуійег), например, для 
Еігеѓох это сервис Сбоозе Госайоп Зегу1сез. Определение местоположения является 
задачей не из легких, и поставщик применяет несколько разных подходов для ее 
решения. 


В случае настольного компьютера с фиксированным (т. е. небеспроводным) под- 
ключением, метод простой, но дает не очень точные результаты. Когда кто-то под- 
ключается к Интернету, данные с его компьютера или локальной сети направляют- 
ся (через кабель, выделенную линию или коммутируемое телефонное соединение) 
на мощное сетевое аппаратное устройство, которое, в свою очередь, направляет их 
в Интернет. Это аппаратное устройство имеет однозначный ІР-адрес, т. е. числовой 
код, который идентифицирует это устройство для других участников сети. Это уст- 
ройство также имеет физический почтовый адрес. 


ПРИМЕЧАНИЕ 


Если у вас есть немного сетевого опыта, вы должны знать, что, подобно всем другим 
компьютерам в локальной сети, ваш компьютер имеет свой ІР-адрес. Но этот ІР-адрес 
является частным и предназначен для того, чтобы можно отличить друг от друга раз- 
ные устройства локальной сети, которые используют одно и то же подключение к Ин- 
тернету (например, настольный компьютер в рабочем кабинете и лэптоп в спальне). 
Для целей геолокации этот адрес не используется. 


Поставщик местоположения использует эти два типа информации для определения 
географического местоположения посетителя веб-страницы. Сначала вычисляется 
ІР-адрес устройства, через которое осуществляется подключение, а затем определя- 
ется его физический адрес. Естественно, такой непрямой подход позволяет опреде- 
лить точное местоположение не пользователя, а только его интернет-провайдера. 
Тем не менее часто даже такие неточные результаты являются полезными. Напри- 
мер, если вы используете средство геолокации, чтобы найти магазин, продающий 
пиццу на вынос, вы можете быстро перейти в район, который вас действительно 
интересует — вблизи вашего дома — даже если вы находитесь не совсем рядом. 


ПРИМЕЧАНИЕ 


Метод определения местоположения посредством ІР-адреса является самым неточ- 
ным способом геолокации. Если имеется лучший источник данных, поставщик место- 
положения будет использовать этот источник. 


Если посетитель зашел на страницу с лэптопа или смартфона по беспроводному 
подключению, поставщик местоположения использует ближайшие точки беспро- 
водного доступа. В идеальном случае поставщик местоположения выбирает данные 
ИЗ огромной базы данных, чтобы определить точное местонахождение этих точек 
доступа, а потом использует полученную информацию, чтобы определить местопо- 
ложение посетителя методом триангуляции‘. 


! Метод создания сети по опорным точкам. Построение базируется на треугольниках. — Ред. 
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А в случае подключения с мобильного телефона поставщик местоположения при- 
меняет подобный метод триангуляции, но использует сигналы от разных антенн 
мобильной связи. Эта быстрая, сравнительно эффективная процедура обычно по- 
зволяет определить местоположение посетителя с точностью до 1 км. (Индустри- 
альные зоны, например центр города, имеют большее количество антенн мобиль- 
ной связи, что позволяет определить местоположение с большей точностью.) 


Наконец, многие мобильные устройства оснащены специальными аппаратными 
средствами СРЗ (С1оба! Роѕібйопіпо Ѕегуісе, глобальная система навигации и опре- 
деления положения), что позволяет определять местоположение таких устройств с 
точностью всего лишь до нескольких метров. Но этот метод геолокации имеет свой 
недостаток — он медленнее и потребляет больше энергии, что важно для уст- 
ройств, работающих на аккумуляторах. Кроме этого, он не особенно хорошо рабо- 
тает в городах с большими и высокими зданиями по причине отражения сигнала от 
строений. Как мы увидим в разд. "Установка параметров геолокации" далее 
в этой главе, решение, использовать или нет высокоточное определение местопо- 
ложения посредством СРЅ (если эта возможность доступна), принимается разра- 
ботчиком приложения. 


Конечно же, возможны и другие способы определения местоположения. Ничто не 
препятствует поставщику местоположения использовать для этого другие источ- 
ники информации, такие как данные от ВЕШ-устройств (Кайо Егедиепсу 
Іаепіћсабоп, радиочастотная идентификация), данные от устройств Ваеюо, фай- 
лы сооКіеѕ с информацией от картографического сайта наподобие Сооз]е Марз 
ИТ. п. 


СОВЕТ 


Местоположение, определенное поставщиком, можно также откорректировать с по- 
мощью другого средства. Например, для браузера Еігеїох можно использовать модуль 
расширения Сеоосаег (ћїр://айаопѕ.тогіа.огд/еп-иѕ/геѓох/аааоп/деоіосаїег), по- 
зволяющий пользователю установить местоположение, которое браузер должен ука- 
зывать при просмотре веб-сайта, применяющего геолокацию. Пользователи могут 
применить этот метод, чтобы подделать свое местоположение, например, что компь- 
ютер, на котором посетитель просматривает веб-сайт из Простоквашино, на самом 
деле находится в Нью-Васюках. 


Из всего этого можно сделать следующий вывод: независимо от способа подклю- 
чения к Интернету, даже если посетитель веб-сайта сидит за настольным компью- 
тером, возможность геолокации позволяет определить его местонахождение 
с большей или меньшей точностью. А если он выходит в Интернет с мобильного 
телефона или с устройства, оснащенного аппаратным обеспечением СРЗ, его 
местоположение может быть определено с точностью скорее большей, чем меньшей. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
В каких сферах применять геолокацию? 


Ответив на большой вопрос, как работает геолокация, нам нужно разобраться еще 
с одним: какая нам от нее польза? 


Здесь ключевым аспектом, который нужно понимать, является то, что функциональ- 
ность геолокации позволяет определить приблизительные географические координа- 
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ты посетителя страницы. И это все. Веб-разработчик должен объединить эту простую, 
но важную информацию с более подробными данными о местоположении посетителя. 
Эти данные можно получить от веб-сервера (обычно из огромной серверной базы 
данных) или какой-либо географической веб-службы (скажем, Соодіе Марз). 


Например, для большого предприятия, имеющего филиалы в нескольких точках, мо- 
жет потребоваться сравнить местоположение посетителя веб-страницы с местополо- 
жением своих разных филиалов, чтобы определить ближайший к посетителю. А раз- 
работчик какого-либо средства социальных сетей может создать диаграмму располо- 
жения группы пользователей, показывающую им расстояние между ними. Или же 
данные о местонахождении можно использовать для предоставления посетителям 
веб-сайта какой-либо услуги, например нахождения ближайшего работающего кругло- 
суточно магазина или кафе. В любом случае, информация о местоположении посети- 
теля веб-страницы важна только в комбинации с другими географическими данными. 


Хотя картографические и географические услуги, предоставляемые другими компа- 
ниями, лежат вне рамок этой книги, мы рассмотрим одну из них — Сооде Марѕ — 
в разд. "Отображение карты" далее в этой главе. 


Определение координат посетителя 


Возможность геолокации предельно проста. Она состоит из трех методов объекта 
пау1дабог.чео1оса®1опт: деЕСиггепіРозііёіоп (), маісћрРоѕіііоп () И с1еахМаксь (). 


ПРИМЕЧАНИЕ 


Объект пау1дафог — это сравнительно незначительная часть УауаЗсире. Его не- 
сколько свойств предоставляют информацию о текущем браузере и его возможностях. 
Наиболее полезным из них является свойство пау1дабог.изегАдепе, которое предос- 
тавляет информационную строку, содержащую подробные данные о браузере, его 
версии, а также операционной системы, в которой он выполняется. 


Для получения местоположения посетителя вызывается метод дееСагтепЕРо$1Е1ол (). 
Но следует понимать, что процесс определения местоположения занимает опреде- 
ленное время, в течение которого никакой уважающий себя браузер не остановит 
всю деятельность на странице, пока ожидает эти данные. Поэтому метод 
деЕСиттхерЕРоз1Е1орт () исполняется асинхронно, т. е. после его запуска продолжается 
выполнение следующего за ним кода. Когда определение местоположения завер- 
шится, для обработки результатов активируется другой фрагмент кода. 


Можно ожидать, что завершение определения местоположения сопровождается 
извещением, во многом подобном тому, как сообщается об окончании загрузки 
изображения или чтения текстового файла. Но язык ЈауаЅсгірі можно назвать каким 
угодно, но только не последовательным. И при вызове метода деСиггепёРоѕіёіоп () 
ему передается функция завершения (сотрІейоп апсНоп). 


Далее приведен пример вызова этого метода: 


пау1чабох .део1осае1от .дче СагкепЕРоз1 тол ( 
Ғипсііоп (розтЕ1оп) { 
// Последний раз вас засекли здесь: 


а1егіё ("Уойц меге 1азЕ зроёёеа аі (" + роѕіііоп.соогаѕ.1Іаёіёџде + 
"," + розіііоп.соогаѕ.1Іопадііџоае + ")"); 
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При исполнении этот код вызывает метод чееСсиггепЕРоз1Е1от() и передает ему 
функцию. Когда браузер завершит процесс определения местоположения, он акти- 
вирует эту функцию, которая выводит окно сообщения. Результаты исполнения 
этого кода в Іпіегпеї Ехрюогег показаны на рис. 12.2. 


2) |8 9тріебеоІосгіоп. ті р-эх| (ўз! 


ё 5ітріе СеоІосаїіоп | ни 


Тһе ѕеагсһ Ваз бесип. 


ЅітріеСеоіосабоп.ћті уап Ёо їгаск уоиг рһуѕіса! Іосайоп. 


АПому е 


| (=>) 8] ѕітріебесІосгбоп.ћёті р->х| 5х 9% 
ё Ѕітріе СеоІосаїіоп 


Үоџ уеге Іаѕї ѕробей аї (43.666698,-79.416702) 


Рис. 12.2. Вверху: сначала нужно разрешить браузеру передать веб-серверу информацию 
о местоположении. Внизу: результаты геолокации — географические координаты посетителя 


Скорее всего, чтобы не загромождать код, вместо определения функции заверше- 
ния в коде вызова метода одеЕСоггепёРозіїіоп (), как сделано в предыдущем приме- 
ре, ее следует определить отдельно, как показано в следующем коде: 


Ғипсііоп део1осаііопбиссезѕз (роѕіїіоп) { 
а1егі ("Үои меге 1азЕ зроёёеа аі (" + роѕібіоп.соогаѕ.1аёііџае + 
"Т + розіііоп.соогаѕ.1Іопадііџоае + ")"); 


} 


Потом при вызове метода дееСигкепЕРоз1Е1оп () ЭТУ функцию можно передавать по 
ссылке: 


пауісдаіог.део1Іосаііоп.деіСоиггепіРоѕііёіопг (део1осаііопЅиссеѕз); 


Но не забывайте: использование геолокации допустимо только в том случае, если 
браузер поддерживает эту возможность и посетитель разрешит ее применение. 
Также разумно протестировать страницу, применяющую эту возможность, прежде 
чем размещать ее на веб-сервере для практического применения. В противном слу- 
чае могут возникнуть проблемы (например, не будет функционировать обработка 
ошибок геолокации), и некоторые браузеры (скажем, Стоте) вообще не смогут 
определить местоположение пользователя. 
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Если вы спрашиваете себя: "А какая мне польза от географических координат?", мы 

р р р » 
рассмотрим ответ на этот вопрос в разд. "Отображение карты" далее в этой главе. 
Но прежде нам нужно понять, как выявлять ошибки геолокации и устанавливать 
некоторые параметры этой возможности. 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
Определение точности предоставленного местоположения 

При успешном выполнении метода сеСоггепіРоѕібіоп() код получает объект 
розібіоп, который имеет два свойства: Е1тезфатр (содержит время выполнения гео- 
локации) и соогаз (содержит географические координаты). 


Но свойство соогаѕ в свою очередь является подобъектом объекта роз1Е1оп и кроме 
СВОЙСТВ 1абіёџде и 1опа1еиае, определяющих географические координаты посетите- 
ля, имеет еще несколько других свойств, предоставляющих дополнительную инфор- 
мацию о местоположении. Это такие свойства, как а1Е1елае (высота над уровнем мо- 
ря), һеааіпд (направление движения) и зрееа (скорость). Но на данный момент эти 
свойства не поддерживаются ни одним браузером. 


Более интересным является свойство ассигасу, которое указывает точность опреде- 
ленного местоположения в метрах. (Это означает, что по мере понижения точности 
данных местоположения значение свойства ассигасу возрастает, что может несколь- 
ко сбивать с толку.) Например, значение свойства ассогасу, равное 2135 метрам, 
означает, что местоположение пользователя было определено в пределах этого рас- 
стояния. 
Свойство ассигасу полезно для определения качества результатов геолокации. На- 
пример, если значение свойства ассигасу измеряется десятками километров, данные 
геолокации вряд ли имеют какую-либо практическую ценность: 
1Е (роѕібіоп.соогаѕ.ассигасу > 50000) { 

геѕиііз.іппегнтмі = 

// Посетитель может быть где угодно на карте. 

"Тһіѕ даез$ 15$ а11 оуег Ве тар."; 
} 
В таком случае, возможно, разумно известить пользователя о неопределенных дан- 


ных его местоположения и/или предложить ему ввести правильную информацию 
самому. 


Обработка ошибок 


Функциональность геолокации не срабатывает, если посетитель отказывается дать 
разрешение на ее применение. В таком случае функция завершения в нашем при- 
мере не вызывается и страница не будет знать, то ли браузер все еще пытается 
определить местоположение или же произошла ошибка в исполнении кода. Для 
решения этой проблемы при вызове метода одеїСоггепірРоѕіёіоп () ему нужно пере- 
давать не одну функцию, а две. Первая функция, как мы уже рассмотрели, вызыва- 
ется в случае успешного завершения процесса геолокации. В противном же случае 
вызывается вторая функция. 


Далее приведен пример с использованием этих двух функций: 


// Сохраняем элемент, в котором страница отображает результат. 


уаг геѕиіёзѕ; 
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м1паом.оп1оаа = Ғопсёіоп() { 
геѕиоієѕ = аосимепе.че Е1етеп®ВуТа ("гези1е 5"); 


// Если функциональность геолокации доступна, 
// пытаемся определить координаты посетителя. 
1Е (пауідаёог.део1Іосаїіоп) { 
пау1дабох .део1осае1от .дче СагкепЕРо$1 тол ( 
аео1оса*1опбиссезз, део1осаііопЕаі1цге 


); 


гезиііз.іппегнНтмі = "Тһе зеагсһ Баз редоп."; 
} 
е1зе { 
// Данный браузер не поддерживает геолокацию. 
геза1$.1ппехНТМЬ = "Тһіѕ ргомзег дӢоеѕп' заррогЕ деоІосаііоп."; 


} 
}; 


Ғипсііоп део1осаііопбиссеѕз (роѕіїіоп) { 
геѕиііз.іппегнНтТмі = "Үоџ меге 1азЕ ѕроіёеа аё (" + 
розіііоп.соогаѕ.1Іаёіёџае + "," + роѕібіоп.соогаѕ.1іопдіёџае + ")"; 


Ғипсііоп део1осаііопҒЕаі1ицге (роѕіїіопЕггог) { 
геѕио1ёѕ.іппегнНтТмМІі = "беоїіосаііоп Ёаі1еа."; 


} 


При вызове функции ошибки геолокации браузер передает ей объект ошибки, ко- 
торый имеет два свойства: соде (содержит числовой код, указывающий один из че- 
тырех типов ошибки) и теѕѕасе (содержит короткое извещение о проблеме). Обыч- 
но извещение предназначено для тестирования, а код ошибки используется кодом 
функции для определения, каким образом решать данную проблему. 


Модифицированная функция ошибки, которая проверяет все возможные значения 
кода ошибки, выглядит так: 


Ғипсііоп део1осаііопҒЕаі1ицге (роѕіїіопЕггог) { 


1Е (роѕібіопЕггог.соае == 1) { 
геѕи1ѕ.іппегнНтТмі = 
"Вы решили не предоставлять данные о своем местоположении, " + 
"но это не проблема. Мы больше не будем запрашивать их у вас."; 


} 


е1зе 1Е (роз1Е1опЕгког.соае == 2) { 


гезиііз.іппегНтТмі, = 
"Проблемы с сетью или нельзя связаться со службой определения " + 
"местоположения по каким-либо другим причинам."; 
} 
е1зе 1Е (роз1Е1опЕгког.соае == 3) { 
геза1$.1ппехНТМЬ = "Не удалось определить местоположение " + 


"в течение установленного времени. "; 
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е1зе { 
геѕи1ѕ.іппегнНтмі = 


"Загадочная ошибка. Совершенно не понятно, что произошло."; 


ПРИМЕЧАНИЕ 


При исполнении веб-страницы с этим кодом с локального компьютера (не с настояще- 
го веб-сервера) функция ошибки не активируется при отказе пользователя дать раз- 
решение на предоставление веб-серверу данных о его местоположении. 


Установка параметров геолокации 


Итак, мы рассмотрели, как вызывать метод чеЕСахкепЕРоз1Е1от () с двумя парамет- 
рами: функцией для обработки успеха геолокации и функцией для обработки 
ошибки при попытке ее выполнения. Но этому методу можно передавать еще один 
параметр, коим является объект, устанавливающий определенные параметры гео- 
локации. 


В настоящее время можно установить три параметра, каждый из которых соответ- 
ствует отдельному свойству объекта параметров геолокации. В следующем приме- 
ре устанавливается один параметр епар1ІенісфАссигасу: 


пауісдаіог.одео1Іосаііоп.деіСиггепіРоѕііёіог (део1осаїіопбиссеѕз, 
део1осаїіопЕаііоге, {епар1енідћАссигасу: ігџое}); 


А в этом примере устанавливаются все три параметра: 


пауісдаёог.део1Іосаііоп.деЕСоггепіРоѕіііопг ( 
део1осаёіопѕиссезѕз, део1осаііопЕаі1ицге, 
{епар1енісАссигасу: ігое, 
Бітеооё: 10000, 
тахітиопАде: 60000} 

); 


В обоих этих примерах параметры геолокации устанавливаются посредством лите- 
ралов объектов ЈауаЅсгірі. Если вы затрудняетесь разобраться со всем этим, 
см. врезку "На профессиональном уровне. Что такое литералы объектов?" далее 
в этой главе. 


Что же означают эти свойства? Свойство епаріеніфћАссигасу задействует высоко- 
точное определение местоположения, используя систему ОРЗ (если устройство 
поддерживает эту возможность и посетитель разрешил ее использование). Не уста- 
навливайте этот параметр, если только вам не требуется получить точные коорди- 
наты, т. к. ее применение сильно повышает расход заряда аккумулятора устройства 
браузера. По умолчанию свойству епаріенісһћАссџигасу присваивается значение 


Ға1зѕе. 


Свойство ёілеоџё определяет период времени, в течение которого страница будет 
ожидать получения данных геолокации, прежде чем считать попытку неудачной. 
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Значения єілеоџё устанавливается в миллисекундах, т. е. 10 000 мс означает макси- 
мальное ожидание 10 с. Отсчет начинается после того, как пользователь согласится 
предоставить данные геолокации. По умолчанию свойству +іпеоџє присваивается о, 
означающий, что страница будет ожидать результаты геолокации бесконечно, не 
активируя ошибку тайм-аута. 


СВОЙСТВО тахітопАде позволяет кэширование данных о местоположении. Например, 
значение пах1тотАае, равное 60 000 мс, разрешает пользоваться данными геолока- 
ции, полученными минуту назад. Это позволяет сэкономить время и вычислитель- 
ные ресурсы, а также означает, что результаты геолокации будут менее точными, 
если посетитель перемещается. По умолчанию свойству тахітотдде присваивает- 
ся 0, означающий, что кэшированные результаты геолокации никогда не использу- 
ются. Свойству можно также присвоить специальное значение тоЕ1п1еу, в этом 
случае будут использоваться кэшированные данные геолокации любой давности. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Что такое литералы объектов? 


В главе 7 мы рассмотрели метод создания объектов в Јауа$сгірї, используя функцию 
в качестве шаблона. В частности, в начале разд. "Отслеживание нарисованного со- 
держимого" мы научились использовать функцию Сіхс1е () для создания множества 
объектов кругов. А в начале разд. "Анимация нескольких объектов" мы использовали 
эту функцию для создания объектов мячиков. 


Применение функции является лучшим подходом для формального определения со- 
ставляющих объекта. Это позволяет получить хорошо структурированный код, что в 
свою очередь облегчает сложные задачи кодирования. Но иногда нужно просто быст- 
ро создать объект для одноразовой задачи. В таком случае разумно использовать 
литерал объекта, т. к. для его создания требуется всего лишь пара фигурных скобок. 
Чтобы создать литерал объекта, открываем фигурную скобку, перечисляем через за- 
пятую свойства, а потом закрываем фигурную скобку. Чтобы сделать код более удо- 
бочитаемым, можно использовать пробелы и переходы на новою строку, но это не 
обязательно. Вот пример создания литерала объекта: 


уаг регѕопОрјесі = { 

ҒігѕЕМате="Јое", 

ІазіМате="Сгарёа" 
}; 
Для каждого свойства указывается его имя и начальное значение. Таким образом, 
вышеприведенный код присваивает свойству регѕопоОрјесі. Е1хзЕМаше значение Јое, 
а свойству регѕопорјесі . 1аѕЕМате — значение сгарка. 
В примере данного раздела литералы объектов служат для отправки информации 
системе геолокации. При условии использования правильных имен свойств (т. е. на- 
званий, ожидаемых методом сеЕСиггепЕРоѕіёіоп ()) подход с применением литера- 
ла объекта работает идеально. Дополнительную информацию о литералах объектов, 


функциях объектов и обо всем другом, связанном с пользовательскими объектами 
Јауа$сгірї, см. здесь: ммм.јауаѕсгірікії. сот/јауаїиїогѕ/оорјѕ.ѕһіті. 


Отображение карты 


Определение географических координат местоположения посетителя веб-сайта — 
конечно же, интересный трюк. Но он быстро утрачивает свою привлекательность, 
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если мы не найдем этой информации какое-либо полезное применение. За этим де- 
ло не станет, т. к. в Интернете имеются целые россыпи данных географического 
местоположения. (Часто проблемой является преобразование этой информации в 
формат, полезный для веб-приложения.) Кроме того, существует несколько карто- 
графических сервисов, неоспоримым лидером которых является Соозе Марѕ. На- 
дежные оценки обращений к этой службе дают основания полагать, что Соое 
Марз является наиболее используемым веб-приложением для любых целей. 


Используя Соое Марѕ, можно создать карту любого размера любой части мира. 
Можно управлять взаимодействием посетителей с этой картой, генерировать мар- 
шруты для проезда из одной точки в другую и, что наиболее полезно, накладывать 
на эту карту свою информацию. Например, веб-страница на основе Сооз]е Марз 
может показывать посетителям местонахождение предприятия владельца страницы 
или отмечать достопримечательности экскурсии по Манхэттену. Начать ознаком- 
ление с возможностями, предоставляемыми службой Соое Марѕ, можно с этой 
веб-страницы: һќр://соде.гоо9]е.сот/аріѕ/парѕ/аоситепіабйіоп/ЈауаЅсгірё (или 
Ббфр://соде.гоое.сотЛипИЛти/ар!5/тар5$/4оситетаНопауа$стри). 


ПРИМЕЧАНИЕ 


Служба Соодіе Марѕ предоставляет свои услуги на бесплатной основе (даже для 
коммерческих сайтов) при условии бесплатного доступа к сайту. (Для платных сайтов 
Сбоодіе предоставляет платный картографический сервис.) В настоящее время Сооде 
Марѕ не вставляет свою рекламу на сайты, пользующиеся ее услугами, но лицензион- 
ные условия явно оговаривают право на это в будущем. 


На рис. 12.3 показана модифицированная версия страницы геолокации. Здесь полу- 
ченные географические координаты пользователя служат для отображения его ме- 
стоположения на карте. 


Создание такой страницы не представляет никаких сложностей. Первым делом нам 
нужна ссылка на сценарии интерфейса АРІ Соое Марѕ. Эта ссылка размещается 
перед всеми блоками сценариев, которые используют функциональность картогра- 


фии: 


<Һеаа> 
<пефа срахзеф="аеЕ-8"> 
<Е161е>Сео1оса1оп Мар</&11е> 
<ѕсгірё згс="Һёбр: / /марз .дооа1е.сот/тарз/ар1/)з?зепзох=егае"></зск1р®> 


</Һћеаа> 


Далее нам будет нужен элемент <діу> для размещения динамически создаваемой 
карты. Для удобства обращения к этому элементу присваиваем ему однозначный 
идентификатор: 


<роау> 
<р 19="геза1ез">Техке до уоц 1іуе?</р> 
<аіу іа="тарЅигҒасе"></4іу> 

</роду> 
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Рис. 12.3. Надпись на рисунке: вы здесь или где-то в этом районе. Совместно функциональность 
геолокации и Соодіе Марѕ позволяют создавать мощные веб-приложения. Используя эти возможности, 
можно сгенерировать карту для любого места, применив всего лишь несколько строк 
кода Јауа$сгірї 


Р азмер карты можно определить с помощью правила таблицы стилей: 


#тарЅигҒасе { 

міаєһ: б600рх; 

Һеісһі: 400рх; 

рогаег: зо11іа 1рх р1аск; 
} 


Теперь все готово к использованию функциональностей, предоставляемых Сооз]е 
Марз. Первым делом нужно создать поверхность карты. В этом примере карта соз- 
дается при загрузке страницы, чтобы ее можно было использовать в функциях 
успеха или ошибки геолокации. (В конце концов, ошибка геолокации означает 
всего лишь то, что страница не может определить текущее местоположение поль- 
зователя. В таком случае все равно имеет смысл отображать карту, но только цен- 
трировать ее относительно точки с координатами по умолчанию.) 


Далее приведен код, исполняемый при загрузке страницы. Сначала он создает кар- 
ту, а потом пытается определить местоположение посетителя: 


уаг геѕиіёзѕ; 
уаг тар; 
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міпаои.оп1оаа = Ёопсііоп () { 


геѕиієѕ = аосипепё .деїЕ1епепЕВу1Іа ("кеѕи1ёѕ"); 


// Устанавливаем некоторые параметры карты. В данном 
// устанавливаются начальный уровень масштабирования 
// Информацию о других параметрах см. в документации 
уаг пуОрііопѕ = { 

2оот: 13, 

тарТуреІа: доод1Іе .тарѕ .МарТурета. КОАрМАР 
}; 


// Создаем карту, используя установленные выше парам 


примере 
и тип карты. 
по Соос1е Марѕ. 


тры. 


тар = пеи доод1е.тарз .Мар (аоситепі . дееЕ1етеп®ВутТАа ("марЅигҒасе"), 


туОрііопѕ); 


// Пытаемся определить местоположение пользователя. 


1Е (пауідаёог.део1Іосаїіоп) { 


пауісдаёог.део1осаііоп.деіСиггепіРозііёіопг (део1осаёіопбиссеѕз, 


део1оса*1опГа11ате) ; 
гези1зѕз.іппегнНтТмі = "Поиск завершен."; 
} 


е1зе { 


гези1$.1ппехНТМЬ = "Ваш браузер не поддерживает " 
"функциональность геолокации."; 


соТореҒаџ1+1осаёіоп(); 


СОВЕТ 


+ 
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В документации по Сооде Марѕ (ќїр://соде.доодіе.сот/іпі/ги/аріѕ/тарѕ/аоситепќаїйоп/ 
јахуаѕсгірі/баѕісѕ.ћіті) показаны два способа определения местоположения посети- 
теля — с помощью рассматриваемой в этой главе возможности геолокации или по- 
средством резервного решения Сооде Сеаг$ (см. разд. "Геолокация" ранее в этой 


главе). 


Но созданная этим кодом карта еще не отображается на странице, т. к. еще не уста- 
новлена географическая ПОЗИЦИЯ. Для этого нужно создать специфическую гло- 
бальную точку, используя объект Таспа, которая потом помещается на карту по- 
средством метода ѕеїсепіег () карты. Далее приведен код, который выполняет все 
эти действия для координат посетителя: 


Ғипсііоп део1осаііопбиссеѕѕ (роз1Е1оп) { 


// Преобразуем местоположение в объект ТаЕ1Тпа. 
Іосаііоп = пем доод1е.марз .ТаЕТла ( 


розіііоп.соогаѕ.1Іаёбіёџоде, роѕзібіоп.соогаѕ.1опаіёоџае); 


// Отображаем эту точку на карте. 
пар. зе Сереехт (Іосаїіоп); 
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Этого кода будет достаточно для отображения карты наподобие показанной на 
рис. 12.3. Но к этой базовой карте можно добавить разные примочки, например 
отображение других мест во врезке или же всплывающее информационное окно. 
Последнее создается с помощью объекта Іпғопіпаои. Далее приведен код для соз- 
дания и отображения всплывающего информационного окна (см. рис. 12.3): 


// Создаем всплывающее информационное окно и устанавливаем 

// его текст и положение на карте. 

уаг 1пЕом1пАом = пем доод1е.тарз.ТпЕоМ1птаом (); 

1пЕомтпаом. ѕзеЕСопіепі ("Уой аге һеге, ог зомемйеге ЁҺегеарооџіѕ."); 


іпҒоиіпаои. ѕзеЕРоѕіііоп (1осаёіоп); 


// Отображаем всплывающее окно. 


іпҒоиміпаом.ореп (мар); 


геѕиІз.іппегнНтТмі = "Мом уоц'ге оп ЕЪе пар."; 


} 


Наконец, в случае ошибки геолокации или отсутствия ее поддержки в браузере по- 
сетителя можно выполнить, по сути, те же действия, но используя альтернативные 
предустановленные координаты вместо координат посетителя: 


Ғипсііоп део1осаііопҒЕаі1ицге (роѕіїіопЕггог) { 


соТореҒаџ11осаііоп (); 


Ғипсііоп соТореҒац1+1осаёіоп() { 
// Это координаты Нью-Йорка. 
уаг пемҮогк = пем доод1Іе.тарѕ.Іаі1па (40.69847, -73.95144); 


птар.зеіСепіег (пемҮогкК); 


Отслеживание перемещений посетителя 


Во всех рассмотренных нами до сих пор примерах мы использовали метод 
деЕСиггепЕРозібіоп (), являющийся ключевой функциональностью геолокации. Но 
объект део1осаЕ1оп имеет еще два других метода, которые позволяют отслеживать 
перемещения посетителя и извещать страницу об этих перемещениях. 


Первым из этих методов является метод маесьРоз1Е1оп(), который в значитель- 
НОЙ степени похож на метод деіСиггепіРоѕіііоп (). Подобно методу 
сеЕСиггепЕРоѕібіоп (), метод маёсһроѕієіоп() принимает параметры: функцию 
успеха (единственный обязательный параметр) и функцию ошибки: 


пауісдабог.део1Іосаііоп.маісћҺРоѕіііоп (део1осаёіопбиссеѕз, 
део1осаіопҒаі1иге); 
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Разница между этими двумя методами состоит в том, что метод маєсћроѕіёбіоп () 
может активировать функцию успеха неоднократно — по определению местопо- 
ложения в первый раз, а потом каждый раз, когда он обнаруживает новое место- 
положение. Для настольных компьютеров, которые никогда не перемещаются, 
методы деЕСигхепЕРо$1Е1оп () И маесьРоз1Е1от() имеют абсолютно одинаковый эф- 
фект. 


Но в отличие от метода деїСиггепіРоѕіёіоп() метод маёсһроѕі+іоп () возвращает 
число. Это число можно сохранить и передать методу сіІеагіаїсһ (), чтобы пре- 
кратить отслеживать перемещения. Этот шаг можно не выполнять и продолжать 
получать сообщения о перемещениях до тех пор, пока посетитель не покинет стра- 
ницу: 


уаг маїсһ = пауідаіог.део1іосаііоп.маісһРозіііоп (део1осаііопбиссеѕз, 
део1оса*1опРа11ате) ; 


пауісдабог.део1Іосаііоп.сіеагаісћ (маїсћ) ; 


Фоновые вычисления 


В первое время после появления языка Јауа$стірї никто особенно не беспокоился о 
его производительности. Этот язык был создан как простое средство для исполне- 
ния небольших сценариев в веб-странице. Можно сказать, что он был необязатель- 
ной примочкой, такая себе упрощенная версия языка Јауа для программистов- 
любителей. Определенно, он не предназначался для управления каким-либо пред- 
приятием. 


Но чуть меньше 20 лет спустя Јауа$Ѕсгірі завоевал Интернет. Веб-разработчики ис- 
пользуют этот язык, чтобы добавить возможность интерактивности в веб-страницы 
почти любого типа, от игр и картографических инструментов до интернет- 
магазинов и вычурных форм. 


Один из примеров недостатков языка ЈауаЅсгірї — это его подход к выполнению 
большого объема вычислений. В большинстве современных систем программиро- 
вания подобные задачи выполняются незаметно в фоновом режиме, позволяя поль- 
зователю продолжать работать над другими аспектами задачи. Но код ЈауаЅспірі 
всегда исполняется на переднем плане. Поэтому любые трудоемкие вычисления 
прерывают выполнение всех других задач на странице, вынуждая пользователя 
ожидать их завершения. Игнорирование этой проблемы выльется вам в определен- 
ное количество очень недовольных посетителей, покинувших вашу страницу с 
твердым намерением больше на нее не возвращаться. 


Изобретательные веб-разработчики нашли несколько частичных решений данной 
проблемы. Эти решения основаны на разбиении долговременных задач на несколь- 
ко меньших частей и исполнении этих частей по одной с помощью метода 
ѕебІпіегпуа1 () ИЛИ ѕеєТітеоџ+ (). Для некоторых типов задач это решение работает 
хорошо (например, это практичный способ для анимирования содержимого холста, 
что и было продемонстрировано в разд. "Анимация на холсте" главы 7). Но если 
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нужно выполнить одну очень долгую операцию безостановочно от начала до конца, 
этот метод порождает сложность и неразбериху. 


Спецификация НТМІ5 предлагает лучшее решение в виде специализированного 
объекта, называющегося веб-работником (жеб уогКкег), предназначенного для вы- 
полнения фоновых вычислений. Для выполнения долговременной задачи мы созда- 
ем нового веб-работника, даем ему необходимый код и запускаем его выполнять 
поставленную задачу. В процессе выполнения веб-работником своей задачи с ним 
можно безопасно поддерживать ограниченное взаимодействие посредством тексто- 
вых сообщений. 


В табл. 12.2 показана текущая поддержка основными браузерами технологии веб- 
работников. 


Таблица 12.2. Поддержка веб-работников основными браузерами 


Минимальная 10* 3.5 3 4 10.6 
версия 


*На момент написания этой книги доступны только ранние бета-сборки этой версии. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 

Предосторожности при использовании веб-работников 

Веб-работник позволяет исполнять код Јаха$сгірё в фоновом режиме, в то время как 
на переднем плане исполняются другие задачи. Это поднимает хорошо известную 
проблему современного программирования: если приложение может одновременно 
выполнять две задачи, одна из них может потенциально нарушить работу другой. 


Проблема возникает, когда два разных фрагмента кода начинают одновременно при- 
тязать на одни и те же данные. Например, один фрагмент кода может пытаться счи- 
тывать данные, в то время как другой пытается эти же данные записать. Или же оба 
фрагмента могут одновременно пытаться присвоить значение одной и той же пере- 
менной, в результате чего первое значение будет затерто другим. Опять же, два 
фрагмента кода могут пытаться манипулировать данными разными способами, тем 
самым устанавливая эти данные в неопределенное состояние. Возможные проблемы 
бесконечны, и их чрезвычайно трудно обнаружить и устранить. Часто многопотоковое 
приложение (т. е. приложение, которое исполняет несколько независимых потоков 
кода, коими, по сути, и являются веб-работники) работает без проблем при тестирова- 
нии, но когда вы начинаете использовать его по-настоящему, в нем происходят сво- 
дящие с ума случайные ошибки. 


К счастью, технология веб-работников избавлена от всех этих проблем, т. к. в ней не 
разрешается совместное использование данных веб-страницей и веб-работниками. 
Данные из веб-страницы можно отправить веб-работнику (или наоборот), но отправ- 
ляются не исходные данные, а их копия, автоматически создаваемая Јауа5сгірї. Это 
означает, что просто не существует возможности, чтобы разные потоки могли бы од- 
новременно обратиться к одной и той же ячейке памяти, создавая трудноуловимые 
проблемы. Конечно же, такая упрощенная модель многопотоковости также наклады- 
вает определенные ограничения на диапазон выполняемых веб-работниками задач, 
но это незначительное сокращение возможностей является необходимой платой за 
уверенность в том, что некоторые слишком амбициозные программисты не натворят 
дел. 
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ПРИМЕЧАНИЕ 


В браузере Сһготе попытка запустить веб-работника из локального файла закончится 
неудачей, если не использовать параметр -а11ом-Е11е-ассезз-Ехом-Е11ез. Самый 
легкий способ сделать это — создать новый ярлык для запуска Сһготе, который до- 
бавляет этот параметр в конец строки команды. Подробные инструкции см. здесь: 
ПИр:/Атучцг!.сот/3]А9дСЬ. 


Трудоемкая задача 


Для того чтобы оценить достоинства веб-работников, нам нужно найти фрагмент 
кода подходящей трудоемкости. Использовать веб-работников для небольших за- 
дач нет смысла. Но для вычислений, напрягающих центральный процессор, кото- 
рые могут подвесить браузер больше, чем на пару секунд, веб-работники сущест- 
венно меняют дело. Возьмем, например, приложение, показанное на рис. 12.4, ко- 
торое генерирует простые числа в определенном диапазоне. Хотя код для решения 
этой задачи простой, сама задача требует трудоемких вычислений, выполнение ко- 
торых может занять значительное время. 


[8 
|->) @] сАнтмі5\Сһаріег12\ргітеМитЬегЅеагсһ Віоскіпод.Һті О > ә Х | 41} ү #5? 
ё Рите Митбег Ѕеагсћ ы | 


Оо а ргіте питбег ѕеагсһ от 1 {0 50000 


Зай Баны 


2, 3, 5, 7. 11. 13, 17, 19, 23, 29, 31, 37, 41. 43, 47, 53, 59, 61. 67. 71, 73, 79, 83, 89, 97, 101, 
103, 107. 109, 113. 127, 131, 137, 139, 149, 151, 157. 163, 167. 173, 179, 181, 191, 193. 197, 
199. 211. 223, 227, 229, 233. 239. 241. 251.257. 263. 269, 271.277. 281. 283. 293. 307. 311, 
313, 317, 331, 337, 347, 349, 353, 359, 367. 373, 379, 383, 389, 397, 401, 409, 419, 421. 431, 
433, 439. 443, 449. 457, 461. 463, 467. 479. 487, 491. 499, 503, 509, 521, 523, 541, 547. 557, 
563, 569. 571, 577, 587, 593. 599. 601. 607. 613. 617. 619, 631. 641. 643, 647. 653, 659. 661, 
673, 677. 683, 691. 701, 709. 719, 727. 733. 739, 743. 751, 757. 761. 769, 773. 787. 797. 809, 
811, 821. 823, 827, 829, 839. 853, 857. 859, 863, 877. 881, 883, 887, 907. 911, 919. 929. 937, 
941, 947. 953, 967. 971, 977. 983. 991. 997. 1009. 1013, 1019, 1021. 1031, 1033, 1039, 1049, 
1051. 1061, 1063, 1069, 1087. 1091. 1093. 1097. 1103. 1109. 1117. 1123, 1129, 1151, 1153, 
1163. 1171, 1181, 1187, 1193, 1201, 1213, 1217, 1223, 1229, 1231. 1237, 1249, 1259, 1277, 
1279. 1283, 1289, 1291, 1297. 1301. 1303, 1307, 1319, 1321, 1327. 1361. 1367, 1373. 1381, 
1399. 1409. 1423, 1427, 1429, 1433. 1439. 1447, 1451, 1453, 1459. 1471, 1481, 1483, 1487. 
1489. 1493, 1499, 1511, 1523, 1531. 1543, 1549, 1553, 1559, 1567, 1571, 1579, 1583, 1597. 
1601, 1607, 1609, 1613, 1619, 1621, 1627, 1637, 1657. 1663, 1667. 1669. 1693, 1697. 1699, 
1709. 1721, 1723, 1733, 1741, 1747. 1753, 1759, 1777, 1783. 1787. 1789, 1801, 1811, 1823. 
1831. 1847, 1861, 1867, 1871. 1873. 1877. 1879, 1889, 1901. 1907. 1913, 1931, 1933, 1949, 
1951, 1973, 1979, 1987, 1993, 1997, 1999, 2003, 2011, 2017, 2027, 2029, 2039, 2053, 2063, 
2069. 2081, 2083, 2087, 2089, 2099. 2111, 2113, 2129, 2131. 2137. 2141, 2143, 2153, 2161. 
2 2 


2 


ПП 


Тһе геѕиіїѕ аге һеге! 


Рис. 12.4. Установите диапазон, в котором выполнять поиск простых чисел, и запустите поиск, нажав 
кнопку За" Ѕеагсһіпд. Для сравнительно узкого диапазона (как на этом рисунке — от 1 до 50 000) 
задача выполняется в течение нескольких секунд, не причиняя особенных неудобств пользователю. 
Но установите более широкий диапазон (например, от 1 до 500 000), и страница перестанет реагировать 
в течение нескольких минут, если не больше. Пользователь не сможет щелкать мышью элементы 
страницы, прокручивать ее или выполнять какие-либо другие действия; кроме этого, браузер может 
выдать сообщение типа "долго исполняющийся сценарий" или залить серым цветом всю страницу 
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Очевидно, что такую страницу можно улучшить с помощью веб-работников. Но 
прежде чем приступить к реализации этого улучшения, нам нужно вкратце ознако- 
миться с текущей разметкой и кодом ЈауаЅсгірі. 


Эта разметка краткая и четкая. Страница использует два элемента управления 
<іприоё>, ДЛЯ ввода начального и конечного числа диапазона. На ней имеется кнопка 
для запуска вычислений, а также два элемента <аіу> — один для вывода результа- 
тов, а другой ДЛЯ отображения сообщения о стоянии. Полностью вся разметка 
внутри элемента <роау> выглядит так: 


<р>ро а ргіте питрег ѕеагсһ Ёгот <іприі 149="Екош" уа1ае="1"> іо 
<іпроё іа="ёо" уа1ае="20000">.</р> 
<роёёоп іа="зѕеагсһВиіёоп" опс1іск="аӢодеагсћһ () ">5ёагі Зеагсһіпд</роёёоп> 
<аіу іа="ргітеСопёаіпег"> 
</аіу> 
<аіу іа = "зіёаёиз"></4іу> 


Одним интересным аспектом является оформление элемента <діу> для отображе- 
ния списка простых чисел. Для него устанавливается фиксированная высота и ши- 
рина, а применение свойств оуегЕ1ом и оуегЕ1ом-х добавляет вертикальную полосу 
прокрутки (но не горизонтальную): 


#ргітеСопёаіпег { 
рогаег: $011а 1рх Юр1аск; 
пагдіп-іор: 20рх; 
пагдіп-роёёотм: 10рх; 
раааіпд: Зрх; 
Һеідћ+: 300рх; 
пах-міаёћ: 500рх; 
оуегЕ1ом: ѕсго11; 
оуегҒ1ои-х: Һіадеп; 
Ғопё-ѕіғе: х-ѕта11; 


} 


Код ЈауаЅсгірі немного длиннее, но не более сложный. Код извлекает числа из тек- 
стовых полей ввода, запускает процесс вычисления, а потом добавляет получаемые 
простые числа в список. Собственно математические вычисления для нахождения 
простых чисел этот код не выполняет. Эта задача передается отдельной функции 
#іпаргітез (), которая и находится в отдельном файле. 


СОВЕТ 


Чтобы понять данный пример или принцип функционирования веб-работников, видеть 
все внутренности функции #і паргітеѕ () нет надобности. Но если вас интересует 
математика, положенная в основу работы этой страницы, или вы просто хотите вы- 
числить несколько простых чисел, полный код примера можно найти на сайте этой 
книги по адресу ћїр://м\м.ргоѕеїесһ.сот/һіті5/. 


Далее приведен полный код функции доѕеагсћ (): 


Ғопсёіоп аоЅеагсһ () { 
// Получаем начальное и конечное число диапазона поиска. 
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уаг ЁгопМопрег = досотепі .деёЕ1ІетепіЕВута ("Егом") .уа1ае; 
уаг ёоМитрег = аӢосотепі .деёЕ1етепЕВута ("ёо") .уа1ае; 


// Выполняем поиск простых чисел. (Это трудоемкая часть задачи.) 
уаг ргітеѕ = Ғіпаргітез (Ёгопмотрег, ЕоМопфег); 


// Перебираем в цикле все простые числа в массиве и 
// конкатенируем их в одну длинную текстовую строку. 
уаг ргіпе1ізѕі = ""; 


Ғог (уаг 1=0; і<ргітеѕ.1іеподіһ; 1++ 


{ 


ргітеізі += ргітеѕ[і]; 


ТЕ (1 != ргітеѕ.Ііеподёһ-1) ргіте1ізѕі +=", "; 


И Вставляем текст с простыми числами в страницу. 


уаг аізѕр1Іау1ізѕі = аосимеп®. ееЕ1етеп®ВуТа ("ргітпесопіаіпег"); 
41$р1ау11 56 .1ппехНТМЬ = ргіте1ізі; 


// Обновляем текст статусного сообщения, информируя пользователя 
// о происходящем. 


уаг збаіџѕріѕр1Іау = аосимеп® .дееЕ1ещеп®ВутТАа ("ѕзёаёцѕ"); 
1Е (ргіте1іѕі.1Іепоїћ == 0) { 
// Не обнаружено ни одно простое число. 


зіаїизѕрізѕр1Іау.іппегнНтмМі = "Ѕеагсһ Ғаі1еа ёо Ғіпа апу геѕи1ёѕ."; 
} 
е1зе { 

// А вот и результат! 


зёаїизрізѕр1ау.іппегнНтмі = "Тре гезо16$ аге һеге!"; 


} 


Как можно видеть, и разметка, и код краткие, простые и четкие. К сожалению, если 
указать большой диапазон поиска, мы также увидим, что код окажется медленным 
и неуклюжим, как пресловутая черепаха. 


Выполнение вычислений в фоновом режиме 


Возможность вычислений в фоновом режиме основана на новом объекте погкег. 
Когда нам нужно выполнить какую-либо работу в фоновом режиме, мы создаем 
новый объект йогкег, снабжаем его необходимым кодом и запускаем на испол- 
нение. 


Далее приведен пример создания нового веб-работника, который исполняет код 
в файле Рите\огКег.}з: 


уаг могкег = пем Могкег ("Руітейогкег.јз"); 


Исполняемый веб-работником код всегда находится в отдельном файле ЈауаЅспірі. 
Такой подход препятствует неопытным, но амбициозным программистам создавать 
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код веб-работника, который пытается использовать глобальные переменные или 
обращаться к элементам страницы напрямую. С веб-работниками ни одна из таких 
невозможна. 


ПРИМЕЧАНИЕ 


Браузеры в обязательном порядке строго разделяют код веб-страницы и код веб- 
работника. Например, код в файле Ргіте\огкег.јѕ никаким образом не может напря- 
мую записывать простые числа в элемент <аіу> страницы. Чтобы поместить свои 
данные на страницу, код веб-работника должен отправить их коду Јауа$сгірї страни- 
цы, а уже этот код отображает их. 


Взаимодействие между веб-страницей и веб-работником осуществляется посредст- 
вом обмена сообщениями. Чтобы отправить данные веб-работнику, вызывается его 
метод розЕМеззаче (): 


могкег .роз®Меззасде (мураёба); 


Веб-работник получает событие опМеѕѕаде, предоставляющее ему копию этих дан- 
ных, и начинает их обрабатывать. 


Когда веб-работнику нужно обратиться к веб-странице, он вызывает свой метод 
роз Меззасе (), передавая ему в параметрах данные, а веб-страница получает собы- 
тие опМеззаде. Этот обмен данными показан на рис. 12.5. 


Веб-страница Веб-работник 
(РгітемитрегЅеагсһ_\Меб\№огкег.һіті) (Рите\М/окег.]з) 


Вызов метода 


Обычный код роз!Меззаде() 


Событие опМеѕѕаде 


Обработка нажатия кнопки Выполняем трудоемкие 
(для примера) вычисления здесь 


Вызов метода 


Событие опМеззаде роѕіМеѕѕаде() 
Обновляем страницу здесь 


Рис. 12.5. Самый простой пример функциональности веб-работников. Процесс состоит из трех шагов: 
страница отправляет веб-работнику данные, веб-работник начинает вычисления, по завершению 
вычислений веб-работник отправляет данные на страницу 


Прежде чем приступить к углубленному рассмотрению предмета веб-работников, 
нужно разобраться еще с одной особенностью. Функция розЕМеззаде () принимает 
только один параметр. Это представляет проблему для кода вычисления простых 
чисел, поскольку ему нужно передать две единицы данных — начальное и конеч- 
ное значения диапазона вычислений. Проблема решается помещением этих чисел в 
литерал объекта (см. врезку "На профессиональном уровне. Что такое литералы 
объектов?" ранее в этой главе). Далее приведен пример создания такого объекта 
с двумя свойствами (первое — хот, для начального числа диапазона, а второе — 
ёо, для конечного), которым также присваиваются значения: 
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могкег.роѕіМезѕѕаде ( 


{ Егош: 1, 
фо: 20000 } 
); 
ПРИМЕЧАНИЕ 


Кстати, веб-работнику можно отправить практически любой объект. За кулисами брау- 
зер посредством технологии /ЗОМ (см. разд. "Сохранение объектов" главы 9) преоб- 
разует этот объект в обычный текст, дублирует его, а затем снова преобразует его 
в объект. 


С учетом всех этих подробностей мы можем модифицировать рассмотренную 
ранее функцию аоѕеагсһ (). Теперь вместо того чтобы выполнять вычисления по 
поиску простых чисел, функция аоѕеагсећ () создает веб-работника и усаживает его 
за эту работу: 


уаг могкег; 


Ғопсёіоп ЯаоЅеагсһ () { 
// Отключаем кнопку запуска вычислений, чтобы пользователь не мог 
// запускать несколько процессов поиска одновременно. 


зеагсһВиёіоп.аӢізѕар1еа = ёгое; 


// Создаем веб-работника. 


могкег = рем Иогкег ("Руіпейогкег.јз"); 


// Подключаем функцию к событию опМеѕзаде, чтобы получать сообщения 
// от веб-работника. 


могкег.оппеѕѕаде = гесе1уеИогкегМеззачае; 


// Получаем пределы диапазона вычислений и отправляем их веб-работнику. 


уаг ЁгопМопрег = досотепі .деёЕ1ІетепіЕВута ("Егом") .уа1ае; 
уаг ёоМитрег = аӢосотепі .деёЕ1етепЕВута ("ёо") .уа1ае; 


могкег.роѕіМезѕзѕаде ( 
{ Егош: ҒЁготМотрег, 
фо: +оМопрег } 
); 


// Информируем пользователя, что вычисления выполняются. 


збаїиѕрізрІау.іппегнНтТМІ = "А мер могкег іѕ оп Ее јор (" + 
Ғгопћотрег + " ёо " + соМопрег +") ..."; 
} 


Теперь к работе приступает код в файле Рите\!откег.]з. Он получает событие 
опМеззаде, выполняет вычисления, а затем отправляет сообщение со списком про- 
стых чисел обратно на страницу: 
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опмеззаае = ЕапсЕ1оп (еуепі) { 
// Сохраняем в свойстве еуере.Чафа отправленный веб-страницей объект. 
уаг ЁгопМопрег = еуепе.Чафа.Ехот; 
уаг КоМитшрег = еуеп®.Чафа.®о; 


// Выполняем поиск простых чисел в указанном диапазоне чисел. 
уаг рг1мез = Ғіпаргітез (Ёгопмотрег, ЕоМопрег); 


// Поиск завершен. Отправляем результаты веб-странице. 
розЕМеззаче (рг1иез); 


}; 


Ғопсёіоп Ёіпаргітеѕ (Ёготїотрег, ёоМопрек) { 
// (Собственно вычисления по поиску простых чисел выполняются 
// этой функцией.) 


} 


Когда веб-работник вызывает метод роѕмеѕѕаде(), он активирует событие 
опМеѕѕаде, которое в свою очередь активирует следующую функцию в веб- 
странице: 


Ғипсііоп гесеіуеайогкегМеѕзаде (еуепі) { 
// Получаем список простых чисел. 


уаг ргіпеѕ = еуепе.Чаба; 


// Отображаем список в соответствующей области страницы. 


// Разблокируем кнопку запуска поиска. 
зеагсһВиёёіоп.діѕар1іеа = Ға1ѕе; 


} 


Теперь мы можем использовать тот же код, который применяли ранее (см. конец 
предыдущего раздела), чтобы преобразовать массив простых чисел во фрагмент 
текста и вставить этот текст в веб-страницу. 


Хотя общая структура кода немного изменилась, его логика, по большому счету, 
осталась такой же. Но вот результат разительно другой. Теперь, когда выполняется 
поиск простых чисел, страница остается доступной. Посетитель может прокручи- 
вать ее вниз и вверх, вводить данные в текстовые поля и выбирать числа в списке 
предыдущего поиска. Но кроме сообщения внизу страницы, нет никаких других 
признаков, что где-то в фоне усиленно трудится веб-работник. 


СОВЕТ 


Если веб-работнику нужен доступ к коду в другом файле ЈауаЅсгірї, эту задачу можно 
с легкостью решить, используя функцию 1трогЕ5ск1рЕз (). Например, функции в 
файле ЕіпаРгітеѕ.јѕ можно вызывать из кода в файле Ргіте\огкег.јѕ, добавив вот эту 
строчку кода непосредственно перед вызовом: 


ітрогёзсгіріёзѕ ("Ғіпаргітеѕ.јӯѕ"); 
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Обработка ошибок веб-работников 


Как мы узнали, основным средством взаимодействия с веб-работниками является 
метод роѕ+Меѕѕаде (). Но веб-работник может отправлять сообщения веб-странице 
еще одним способом — посредством события опеггог, которое сигнализирует об 
ошибке: 


могкег.опеггог = могкегЕггоү; 


Теперь, в случае ошибки в фоновом коде, данные об этой ошибке можно отправить 
странице. Следующий код веб-страницы просто отображает текст сообщения об 
ошибке: 


Ғопсііоп могкегЕггог (еггог) { 


ѕбаіиѕрізрІау.іппегнНтТМІ = еггог.пезѕзаде; 


} 


Но кроме свойства меззаде, объект еггог также имеет свойства 1іпепо и Е11епаме, 
указывающие номер строки и имя файла соответственно, в которых произошла 
ошибка. 


Отмена исполнения фоновой задачи 


Теперь, когда у нас есть базовый рабочий пример веб-работника для фоновых вы- 
числений, мы можем улучшить его. Первым делом мы прекратим выполнение кода 
веб-работника. 


Это можно сделать двумя способами. В первом веб-работник может остановить сам 
себя, вызвав метод с1оѕе (). Но в большинстве случаев веб-работник останавлива- 
ется создавшей его страницей, вызывая метод бегтіпабе () объекта могкег (и это 
второй способ). Например, следующий код задействует кнопку прямой отмены ис- 
полнения веб-работника: 


Ғопсііоп сапсе1$еагсһ () { 
могкег .+егтіпаёе () ; 
ѕбаіиѕрізрІау.іппегнНтТмі = ""; 
зеагсһВоёіоп.аіѕар1еа = Ға1ѕе; 


} 


Нажатие этой кнопки останавливает текущий поиск и снимает блокировку с кнопки 
запуска поиска. Но не забывайте, что остановив исполнение работника, вы не смо- 
жете больше отправлять ему сообщений, и его больше нельзя будет снова исполь- 
зовать для вычислений. Чтобы выполнить новый поиск, нужно будет создать новый 
объект иогкег. (Но в этом примере это уже делается, поэтому он работает, как сле- 
дует.) 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Резервное решение для веб-работника 


К этому времени вы уже, наверное, спрашиваете себя, что следует делать, если стра- 
ница с веб-работником просматривается в браузере, который не поддерживает эту 
возможность? 
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Как и в случае с геолокацией, в качестве резервного решения для веб-работников 
можно обратиться к проекту Сооще Сеагз, который имеет подобную возможность — 
пул рабочих потоков (могкег роо!). Подробную информацию см. здесь: ћр://соде. 
доодІе.сот/аріѕ/деагѕ/арі могкегрооі.ћїіті. Но даже при использовании функцио- 
нальности из проекта Соодіе Сеагѕ все равно нужно обеспечить еще одно резервное 
решение для компьютеров, на которых эта система не установлена. Самое легкое и 
простое решение — это выполнять те же вычисления на переднем плане: 


1Е (мтроаом.Моккегк) { 

// Функциональность веб-работников поддерживается. 

// Создаем веб-работника и усаживаем его за работу. 
} е1зе { 

// Функциональность веб-работников не поддерживается. 

// Можно просто вызвать функцию поиска простых чисел 

// и ожидать ее завершения. 
} 
При этом подходе не требуется писать никакого дополнительного кода, т. к. функция 
для поиска простых чисел уже существует, и ее можно вызвать напрямую, минуя вы- 
зов веб-работника. Но в случае по настоящему трудоемкой задачи этот подход может 
заблокировать браузер на довольно длительное время. Альтернативным (но более 
кропотливым) подходом будет попытка имитировать фоновые вычисления, используя 
методы ѕеёїпіегуа1 () и ѕеЕТітеоиё (). Например, можно создать код, который про- 
веряет всего лишь несколько чисел за каждыи интервал. 


Обмен более сложными сообщениями 


В последнем усовершенствовании нашего примера с веб-работником мы оснастим 
его возможностью предоставлять информацию о ходе выполнения задачи 
(рис. 12.6). 


Чтобы создать индикатор хода выполнения, в процессе работы веб-работнику нуж- 
но отправлять веб-странице данные о процентах выполненного задания. Но как мы 
уже знаем, веб-работники имеют только один способ общаться с создавшей их 
страницей — посредством метода роѕємеѕзасе (). Поэтому, для того чтобы добавить 
индикатор хода исполнения, веб-работнику нужно отправлять два типа сообщений: 
сообщения о ходе исполнения (в процессе работы) и сообщение со списком про- 
стых чисел (по завершении вычислений). Кроме того, эти сообщения должны быть 
явно различимы. 


Лучшим решением этой задачи будет добавление дополнительной информации 
в сообщение. Например, в сообщение о ходе исполнения веб-работник может доба- 
вить метку "Рходтезз" ("Прогресс"), а в сообщение со списком простых чисел — 
метку "Ргітегізе" ("ПростыеЧисла"). 


Чтобы поместить основную информацию и метку типа сообщения в одно сообще- 
ние, нам нужно создать литерал объекта. Это точно такой же метод, как и приме- 
няемый страницей для отправки веб-работнику данных о границах диапазона вы- 
числений. Текст метки типа сообщения присваивается в виде значения свойству 
пеѕѕадеТуре, а собственно сообщение помещается во второе свойство, дата. 
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Рис. 12.6. По мере проверки, является ли число из указанного диапазона простым, код обновляет 
указатель хода исполнения, информируя пользователя о степени завершения задачи. Индикатор можно 
сделать немного повычурнее, использовав заполняемую цветом полосу (см. рис. 5.7) 


Далее приведен модифицированный код веб-работника, который добавляет метку 
типа сообщения в сообщение со списком простых чисел: 
опмеззаае = ЕапсЕ1оп (еуепі) { 


// Выполняем поиск простых чисел. 
уаг рг1мез = Ғіпаргітезѕ (еуепі.даіёа.Ёгот, еуепё.дӢаба.бо) ; 


// Отправляем результаты веб-странице. 
роѕ Меѕѕаде ({МеѕѕадеТуре: "Ргіте1іѕі", даа: ргітеѕ}); 
}; 
Код В функции Ғіпаргіпеѕ () также вызывает метод роѕЕМеѕѕзаде () для отправки со- 
общений веб-странице. Он использует те же свойства меззадеТуре И даба. Но теперь 
свойство пеззадеТуре указывает, что сообщение является сообщением о ходе ис- 
полнения, а данные содержат значение процента завершения задачи: 


Ғопсёіоп Ёіпаргітеѕ (Ёготїотрег, ёоМипрег) { 


// Вычисляем процент выполнения задачи. 


хаг ргодгезз = Маһ. гоџпа (і /11ізё.Іепаоёћ*100); 


// Отправляем обновленные сведения о ходе выполнения, только если 


// они изменились не менее чем на 1%. 
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ТЕ 


} 
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(ргодгезѕзѕ != ргеуіоиѕРгодгеѕѕ) { 
роз*Меззаде ({теѕѕадеТуре: "Ргодгеѕѕ", даа: ргодгеѕѕ}); 
ргеуіоцѕРгодгеѕз = ргодгезз; 


Когда веб-страница получает сообщение от веб-работника, она должна начать его 
обработку с проверки свойства меззадетуре, чтобы определить тип полученного 
сообщения. Если сообщение содержит список простых чисел, тогда результаты 
выводятся в соответствующем поле страницы. Если же содержимое сообщения 
является извещением о ходе исполнения, тогда отображается процент завершения 
задачи: 


Ғипсііоп гесеіуеаћогкегМеѕзаде (еуепі) { 


уаг пеѕѕаде = еуеп®.аафа; 


ТЕ 


} 


(пеззаде .пеззааеТуре == "Ргіте11іѕі") { 


уаг ргіпеѕ = шеззаде .Чава; 


// Отображаем список простых чисел. Код для этого такой же, 


// как и прежде. 


15 


/ 


зіаїиѕрізѕр1ау.іппегнНтмМі = пезѕасде.даба + "% аопе ..."; 


1Е (пеззаде.меззааеТуре == "Ргодгеѕѕ") { 


/ Отображаем ход исполнения. 
Ш 


ПРИМЕЧАНИЕ 


Эту страницу можно оформить и по-другому. В частности, можно заставить веб- 
работника вызывать метод роѕ+Меѕзаде () всякий раз, когда он находит новое про- 
стое число. Веб-страница потом добавляет каждое новое простое число к списку и 
сразу же отображает его. Преимущество этого метода состоит в том, что отдельные 
результаты отображаются по мере их поступления. Но он также имеет и недостаток, 
т. к. исполнение страницы постоянно прерывается (потому что веб-работник находит 
простые числа довольно быстро). Идеальное решение зависит от характера задачи — 
сколько времени нужно на ее завершение, полезны ли частичные результаты, на- 
сколько быстро вычисляется каждый частичный результат и т. п. 


ПРАКТИЧЕСКИЕ ЗАНЯТИЯ ДЛЯ ОПЫТНЫХ ПОЛЬЗОВАТЕЛЕЙ 
Другое применение веб-работников 


В примере поиска простых чисел веб-работники используются наиболее простым воз- 
можным способом — для выполнения одной четко определенной задачи. Страница 
создает нового веб-работника для каждого нового поиска. Этот веб-работник выпол- 
няет единственную задачу. Он получает одно сообщение от веб-страницы и отправ- 
ляет веб-странице одно сообщение. 
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Но использование веб-работника не обязательно должно быть таким простым. Далее 
представлено несколько примеров, как можно расширить конструкцию веб-работника 
для выполнения более сложных задач. 


® Повторно использовать веб-работника для выполнения нескольких задач. 
Веб-работник никуда не исчезает, когда он завершает работу и выполнение кода 
обработчика события опМеззаае доходит до конца. Он просто бездействует в ре- 
жиме ожидания. Если отправить веб-работнику другое сообщение, он выходит из 
режима ожидания и снова приступает к работе. 


• Создать несколько веб-работников. На веб-страницу может трудиться несколько 
веб-работников одновременно. Допустим, например, что мы хотим выполнять по- 
иск простых чисел одновременно в нескольких диапазонах. Для этого можно соз- 
дать нового веб-работника для каждого процесса поиска и отслеживать всех этих 
работников посредством массива. Когда один из веб-работников возвращает свой 
список простых чисел, мы добавляем этот список к странице, принимая меры для 
предотвращения затирания ранее записанных результатов. (Но здесь уместно 
предупредить, что веб-работники имеют сравнительно высокие издержки, и одно- 
временное исполнение десятка или около того веб-работников может серьезно на- 
грузить компьютер.) 


• Создавать веб-работника из другого веб-работника. Веб-работник может запус- 
кать собственных веб-работников, отправлять им сообщения и получать сообще- 
ния от них. Этот метод полезен для сложных вычислительных задач, требующих 
использования рекурсии, например вычисление последовательности Фибоначчи. 


• Загружать данные с помощью веб-работника. Веб-работники могут использо- 
вать объект хмЬНЕЕрВечиез+ (см. разд. "Объект ХМЁНЕрВедие$!" главы 11), чтобы 
открывать новые страницы или отправлять запросы веб-службам. Передать полу- 
ченную информацию своей веб-странице они могут, вызывая метод роз Меззаде (). 


• Выполнять периодические задачи с помощью веб-работника. Веб-работники 
могут использовать функции зе Т1теоче () и зесТпеегуа1 () точно таким же об- 
разом, как это делают обычные веб-страницы. Например, веб-работник может про- 
верять веб-сайт на наличие новых данных каждую минуту или десять минут. 


Управление историей просмотров 


История просмотров — это функциональность НТМГ5, которая расширяет воз- 
можности объекта в1з5оху ЛауаЗспре. Звучит просто, но нужно знать, когда и зачем 
следует использовать эту возможность. 


Если вам никогда раньше не приходилось встречаться с объектом һізѕіогу, не стоит 
волноваться по этому поводу. До сих пор он не мог предложить нам ничего полез- 
ного. В действительности, традиционный объект һізіогу имеет только одно свой- 
ство и три основных метода. Это свойство — Іепоёћ — содержит информацию 
о количестве элементов в списке истории просмотров (т.е. в поддерживаемом 
браузером списке недавно посещенных веб-страниц). Вот пример использования 
этого свойства: 


а1егі ("Уоц һауе " + һізѕіогу.Іеподіһ + 
" радез іп уоцг ргоиѕег'ѕ һізіогу 1ізѕі."); 


Наиболее полезным методом объекта Һізіогу является метод раск(). Этот метод 
позволяет переместить пользователя на один шаг назад в истории просмотров: 


ћізѕёогу.раск (); 
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Эффект этого метода равнозначен нажатию пользователем кнопки браузера Назад. 
Подобным образом можно использовать метод Еогмага() для перемещения на один 
шаг вперед или метод чо () для перехода вперед или назад на определенное количе- 
ство шагов. 


Но все это не представляет большой ценности, если только вы не хотите создать 
для веб-страницы собственные кнопки Назад и Вперед. Но НТМТ.5 добавляет это- 
му объекту в1зЕохгу несколько дополнительных возможностей, которые можно ис- 
пользовать для реализации намного более амбициозных задач. Главной из этих 
возможностей является метод раз 5+афе (), который позволяет изменить ОКІ в ад- 
ресной строке браузера, не обновляя при этом содержимого страницы. Эта возмож- 
ность приходится кстати в специфической ситуации, а именно при создании дина- 
мических страниц, которые незаметно загружают новое содержимое и плавно 
обновляют себя. В такой ситуации ОВТ, страницы и ее содержимое могут рассогла- 
соваться. Например, если страница загрузит в динамическом режиме содержимое с 
другой страницы, первоначальный ОКІ страницы не изменится, что может вызвать 
разнообразные проблемы с созданием закладки для этой страницы. Эту проблему 
можно решить с помощью отслеживания истории сеансов. 


Если вы пока не видите, как это сделать — не переживайте, в следующем разделе 
мы рассмотрим страницу, идеально подходящую для применения истории про- 
смотров. 


Проблемы с ОВ 


В разд. "Получение нового содержимого" главы 11 мы рассмотрели страницу со 
слайд-шоу (см. рис. 11.3). Щелкая по ссылкам Ргеуіоиѕ и №ехќ, посетитель может 
загружать и отображать на странице новое содержимое. Но самое примечательное 
в этом примере то, что каждое изображение загружается автономно, не вызывая 
перезагрузки всей страницы. Эта возможность достигается благодаря объекту 
ХМЬНЕЕрВесаезе. 


Но страницы с динамическим содержимым, использующие данный тип конструк- 
ции, имеют общеизвестный недостаток. В частности, хотя по загрузке нового со- 
держимого страница изменяется, ОВГ, в строке адреса браузера остается прежним 
(рис. 12.7). 


Теперь представьте себе, что пользователю особенно понравился один из просмат- 
риваемых слайдов, например дерево для загадывания желаний, и он сохраняет ОВГ, 
изображения в закладках, отправляет его по электронной почте своей приятельни- 
це, а также делает запись об изображении с указанием ОКІ в Твиттере. Но пробле- 
ма состоит в том, что когда этот пользователь попытается возвратиться к этому 
изображению по сделанной закладке, или когда его приятельница щелкнет на по- 
лученной ссылке, чтобы посмотреть, что же это за особенное изображение, или ко- 
гда любой из прочитавших его сообщение в Твиттере попытается перейти по ука- 
занной ссылке, все они очутятся на первом слайде. Сам пользователь, может быть, 
и найдет понравившееся ему изображение, но вот у остальных может не хватить 
терпения щелкать до пятого слайда, или они могут даже и не знать, что можно за- 
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гружать другие изображения. Это проблема усугубляется в случае, если слайдов 


огромное количество, например, поток ЕісКг может содержать десятки и даже сот- 
ни изображений. 


Разное содержимое, одинаковый УВЕ 


Гһе Ехойс Зе оѓ Сһіпа 


мпп Тгее 


Рис. 12.7. Две версии страницы показа слайдов с разными изображениями. 
Несмотря на разное содержимое, обе страницы имеют одинаковый ОВІ — Сћһіпа$ќеѕ.ћіті 


Традиционное решение: ћаѕћбапдо ОВ 


Для решения этой проблемы некоторые веб-страницы добавляют дополнительную 
информацию в конец ОВГ. Один из наиболее применяемых (и наиболее спорных) 
подходов, называющийся ћаѕлрапе, добавляет в конец ОВГ, символы #!, за кото- 
рыми следует идентифицирующий текст. Вот пример одного из таких ОКІ: 


ЋЕёр://јјёгауе1ба1еѕ. соп/Сһіпаѕібеѕ.Һіт1#! /51іде5 


Этот метод работает потому, что браузеры рассматривают все, что идет после сим- 
вола #, как фрагментную часть ОКІ. Таким образом, в случае показанного в при- 
мере ОВГ браузер знает, что запрашивается все та же страница Сіџпа$Ѕіќеѕ.ћіті, но 
только с дополнительным фрагментом в конце. 


С другой стороны, посмотрим, что произойдет, если код ЈауаЅсгірі изменит ОВГ, 
не подставив символы #!: 


БЕЕр://)) Егауе1а1ез .сот/СЬ1паб1еез .6511/$114е5 


Теперь браузер отправит этот запрос веб-серверу и попытается загрузить новую 
страницу. Но это явно не то, что нам требуется. 


Как же реализовываться метод һаѕһбапе? Сначала нам нужно изменить ОВГ, кото- 
рый отображается в браузере, когда страница загружает новое изображение. Это 
можно сделать, присвоив значение свойству 1осасіоп.һгеғ с помощью кода 
Тауабспре. Далее, по загрузке страницы нам нужно исследовать ОКІ, извлечь из 


426 Часть ІІ. Создание интеллектуальных веб-приложений 


него фрагментную часть и получить с веб-сервера соответствующее динамическое 
содержимое. Все это требует довольно значительного жонглирования кодом, но 
использование какой-либо библиотеки ЈауаЅсгірі, например Раф (һрѕ:// 
оіћир.сот/тќгрсіс/раёћјѕ), может намного упростить и облегчить эту задачу. 


Хотя метод ћҺаѕһбапе получил широкое распространение, он также порождает мно- 
го споров о его соответствии требованиям. Веб-разработчики начали отказываться 
от его использования по нескольким причинам. 


П Сложность получаемых ОВГ. Хорошим примером будет сайт Еасебоок. 
В прошлом, после непродолжительного просмотра этого сайта ОКІ в адресной 
строке браузера засорялся дополнительной информацией, порождая таких мон- 
стров, как, например, һќр://ууууу.Ғасероок.сот/ргоВе.рћр?іа=1586010043#!/ 
расеѕ/НаѕКке/401573824771. Теперь разработчики этого сайта используют исто- 
рию просмотров для поддерживающих эту возможность браузеров. 


П Отсутствие гибкости. Метод һаѕһбапе упаковывает в ОВГ, большой объем ин- 
формации. Если изменить работу страницы, использующей этот метод, или ее 
способ сохранения информации, старые ОКІ могут оказаться недееспособными, 
что вызовет крупный сбой в просмотре сайта. 


П Оптимизация поисковых систем. Поисковые системы могут рассматривать 
разные ОКІ типа БазВфапе, практически как один и тот же ОКІ. В случае стра- 
ницы Сіпе$іѓеѕ.һіті это означает, что отдельные туристические достопримеча- 
тельности, представляемые конкретными слайдами, не будут проиндексирова- 
ны, более того, поисковые системы могут вообще игнорировать эту информа- 
цию. Это означает, что страница СЬтаЗИез.Вит| не будет возвращена в 
результатах поиска по словам "сһіпа \1з те тее". В Соое пытались решить 
эту проблему, используя специальный синтаксис для фрагментной части ОКІ 
(Вр://соде.гоозе.сот/\ууе/адахсгауИп?/40с5/зето-5атед Вет), но веб- 
разработчики единогласно подвергли его критике за то, что он сбивал всех 
с толку. 


П Соо] ОКІ, важны. Соо! О ВТ, — это короткие и четкие адреса веб-страниц, кото- 
рые — самое главное — никогда не меняются. С философией Соо1 ОВТ, в изло- 
жении создателя Интернета, Тима Бернерса-Ли (Тіт Ветпетѕ-Гее), можно озна- 
комиться на этой странице: үүү.үЗ.ого/Ргоуійег/8уіе/ОКІ.Һті]. И независимо 
от того, насколько сильно ваше желание поддерживать доступность к хорошему 
веб-содержимому, ОКІ типа һаѕһбапе трудно поддерживать, и они, скорее все- 
го, не переживут следующий этап в эволюции Интернета. 


Хотя веб-мастеры по-разному относятся к этому методу, большинство из них раз- 
деляет мнение, что такие адреса представляют короткий этап в развитии Интернета, 
и со временем им на смену придет возможность отслеживания истории сеансов. 


НТМЕ5-решение: история сеансов 


НТМІ5 предоставляет другое решение проблемы с ОКІ в отслеживании истории 
сеансов. Можно изменять ОВГ, любым образом, не требуя при этом добавления в 
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него странных символов, как в случае с методом һаѕһћбапо. Например, когда стра- 
ница Сһіпа$1ќеѕ.һті загрузит пятый слайд, ее ОКІ можно изменить так: 


Вер: //)) Екауе1$а1ез .сом/СЬ1па$1еез5.5 1 


В этом случае браузер не будет пытаться запрашивать страницу Сһіпа$1(еѕ5 Вет, а 
оставит прежнюю страницу, но загрузит для нее указанный слайд, а это нам и нуж- 
но. То же самое происходит, когда посетитель перемещается в обратном порядке 
в истории просмотра. Например, если посетитель перейдет к следующему слайду 
(и ОВГ изменится на Сіџпа$1еѕ5.һт]), а потом возвратится назад к четвертому 
(возвращая ОВЕ к Сџпа$1(еѕ54.һті!), браузер сохраняет текущую страницу и акти- 
вирует событие, с помощью которого можно загрузить соответствующий слайд и 
восстановить правильную версию страницы. 


Хотя с первого взгляда все выглядит как идеальное решение, в нем есть значитель- 
ный недостаток. Чтобы эта система работала должным образом, для каждого ис- 
пользуемого ОКІ нужно в действительности создать страницу. Для нашего приме- 
ра это означает, что надо создать страницы Сһіпа$1(еѕ1.һті, Сһпа$1ќеѕ2.һті, 
СрытазЗез3 Ват и т. д. Ведь посетитель может захотеть обратиться к этим страни- 
цам напрямую, например, через закладку, введя адрес вручную, щелкнув по ссылке 
в сообщении электронной почты и т.п. Для крупных веб-сайтов (например, 
Еасебоок или ЕПсКг) это не представляет большой проблемы, т. к. они могут ис- 
пользовать серверный код и предоставить содержимое одного и того же слайда 
в другой упаковке. Но самостоятельному веб-разработчику для этого может потре- 
боваться приложить несколько больше усилий. Некоторые возможные подходы 
к решению этой проблемы рассматриваются во врезке "На профессиональном уровне. 
Создание дополнительных страниц для соответствия ОРІ" в конце этой главы. 


Теперь, когда мы понимаем, каким образом история сеансов связана со страница- 
МИ, собственно использование ее не представляет никаких трудностей. История 
сеансов состоит всего лишь из двух методов и одного события, добавленных к объ- 
екту һізіогу. 


Наиболее важным является метод раз 5еаее (), который позволяет изменить часть 
ОВГ, обозначающую страницу, в любое требуемое время. По причинам безопасно- 
сти остальная часть ОКІ изменениям не поддается. (Возможность изменять основ- 
ную часть ОКІ предоставила бы мощное средство для хакеров для подделывания 
веб-сайтов.) 


Далее приведен пример использования метода риѕћѕёаѓёе () для изменения конечной 
части ОВГ на Сшпа$іќеѕ4.ћті: 


ћізѕёогу.ризѕзһЅёаёе (пи11, пи11, "Сһіпабіёезѕ4.һітм1"); 


Метод роазрбфаке() принимает три аргумента, обязательным из которых является 
только третий — ОВГ, выводящийся в строке адреса браузера. 


Первым параметром могут быть любые данные, сохраняемые для представления 
текущего состояния данной страницы. Как мы увидим далее, эти данные можно 
использовать, чтобы восстановить состояние страницы, если пользователь возвра- 
тится к данному ВЕ посредством списка истории посещенных страниц браузера. 
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Второй параметр — это заголовок страницы, отображаемый в браузере. В настоя- 
щее время все браузеры дружно игнорируют эту подробность. Если нет надобности 
в установлении этих параметров, им можно просто присвоить значение по11, как 
показано в примере ранее. 


Далее приведен код, который нужно добавить в страницу СЫпаЗИез.В |, чтобы 
изменять ее ОКІ в соответствии с текущим отображаемым слайдом: 


Ғипсііоп пехёЅ1іае () { 
1Е (ѕ11аеМопрег == 5) { 
ѕ11іаеМопрег = 1; 
} еїзѕе { 
ѕзІіаеМитрег += 1; 


Һіѕіогу .риѕһЅіаёе (51ійеМопрег, пи11, "СһіпаЅіёеѕ" + 
ѕ1іаеМипрег + ".Һім1"); 


аоТоМем511іае () ; 
геіогп Еа1зе; 


Ғипсііоп ргеуіоизѕ1іае () { 
1Е (511ідеМотрег == 1) { 
ѕ1іаеМопрег = 5; 
} е1зе { 
ѕ1іаемотрег -= 1; 


} 
Һіѕіогу .ризббфаее (51ійеМопрег, пи11, "СһіпаЅіёеѕ" + 
ѕ1іаеМипрег + ".Һім1"); 


аоТоМем511іае () ; 
геіџогп Еа1зе; 


} 


Обратите внимание, что в качестве параметра состояния страницы используется 
номер текущего слайда. Важность этого обстоятельства станет понятной чуть поз- 
же, при рассмотрении события опрРорѕѓёабе. 


Результаты исполнения кода показаны на рис. 12.8. 


Используя метод ризь5+ате (), также следует иметь в виду событие опрорѕѓаёе, ко- 
торое является его естественным дополнением. В то время как метод роѕћЅёаёе () 
вставляет новый элемент в список История (Ніѕіогу) браузера, событие опрорѕёаёе 
предоставляет средство для обработки этого элемента, когда посетитель возвратит- 
ся к нему. 


Чтобы понять работу метода, рассмотрим, что происходит, когда посетитель про- 
сматривает все слайды. В процессе просмотра ОВГ, в адресной строке браузера 
меняется с СЫпаб Иез. т! на СЫша$Иез1 Вт], потом на Сһпа$іќеѕ2.һті, на 
СытаЗез3 Вит и т. д. Хотя страница в действительности не изменяется, все эти 
ОВГ добавляются в историю просмотра браузера. Если пользователь щелкнет по 
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Рис. 12.8. При перемещении посетителя по слайдам КІ изменяется, чтобы соответствовать 
текущему слайду. Отображаемый КІ аккуратный, логичный и ссылается точно на требуемую точку 
в слайд-шоу 


ссылке для перехода на предыдущий слайд (например, с Сіпа$1(еѕ3.һ№ті на 
Ста ез2.6ит!), активируется событие опрорѕбабе. Это событие предоставляет 
коду информацию состояния, сохраненную ранее посредством метода разь5ае (). 
Задача программиста заключается в использовании этой информации, чтобы вос- 
становить требуемую версию страницы. В настоящем примере это означает загруз- 
ку соответствующего слайда: 


міпаоу.опрорѕёабе = ЕопсЕ1оп(е) { 
1Е (е.збабе != пи11) { 
// Определяем номер слайда для данного состояния. 
// (Этот номер также можно было вырезать из ОВЬ, используя 


// свойство 1осаёіоп.һгеЁ, но для этого потребуется больше работы.) 
з1іаеМипрег = е.збаіе; 


// Запрашиваем этот слайд у веб-сервера. 
аоТоМем511аде () ; 
} 

}; 
Обратите внимание, что в этом примере выполняется проверка на наличие объекта 
состояния, прежде чем приступать к работе. Это делается из-за того, что некоторые 
браузеры (включая Сһготе) активируют событие опРорб+а+е при начальной загруз- 
ке страницы, даже если метод риѕћҳѓаѓе () еще не вызывался. 


ПРИМЕЧАНИЕ 


Существует еще один метод объекта һізѕіогу — гер1асебіабе (), но он использует- 
ся не так часто. Метод гер1асеѕіаѓбе () можно применять для того, чтобы заменить 
информацию о состоянии, которая связана с текущей страницей, не добавляя при 
этом ничего в список История (Ногу). 


Поддержка браузерами истории сеансов 


Функциональность отслеживания истории сеансов является сравнительно новой 
возможностью, хотя все последние версии основных браузеров поддерживают ее 
(табл. 12.3), за исключением НиегпеЕ ЕхріІогег. 
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Таблица 12.3. Поддержка браузерами истории сеансов 


Минимальная 4 5 11.5 4.2 
версия 


Проблему, возникающую вследствие отсутствия поддержки браузером истории се- 
ансов, можно решить несколькими способами. Если ничего не делать, просто не 
будут выводиться составные ОВГ. Как раз это и происходит, если загрузить рас- 
смотренный пример в Пиуегпе ЕхрІогег — какой бы слайд мы не загрузили, ОК, 
остается неизменно Сііпа$іѓеѕ.һёті. Этот подход также применяется на сайте Ейскг 
(для примера, откройте страницу ћќр://іпуогі.сот/бһпуапу в Іпѓіетпеї Ехр|огег). 


Другой подход — активировать обновление всей страницы при загрузке нового со- 
держимого. Этот подход имеет смысл в том случае, если предоставление качест- 
венного, значащего ОВГ более важно, чем приятная демонстрация динамически 
загружаемого содержимого. Например, этот метод применяется в онлайновом хра- 
нилище кода на сайте СіїНир (һёр://о1ир.сот). Но если просматривать этот сайт 
через браузер, поддерживающий историю сеансов, то содержимое не только загру- 
жается динамически, это делается с применением эффекта скольжения изобра- 
жений. 


Самый сложный вариант — использовать историю сеансов там, где это возможно, а 
где невозможно, применять резервное решение в виде ОКІ типа һаѕћбапр. (Этот 
метод используется на Еасероок.) Недостатком данного метода является необходи- 
мость применять два разных подхода в одной и той же странице. Можно также 
использовать заплатку ЈауаЅсгірі, которую можно загрузить здесь: һќр:// 
ойһор.сот/Љаіорѓоп/Љіѕіогу.јѕ. 


НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ 
Создание дополнительных страниц для соответствия ШРІ. 


Технология истории сеансов придерживается первоначальной философии Интернета: 
каждый фрагмент содержимого должен иметь свой однозначный, стойкий ОВІ. К со- 
жалению, это означает, что необходимо обеспечить, чтобы эти ОВІ позволяли посе- 
тителям возвратиться к понравившемуся им содержимому. И это намного более труд- 
ная задача. Например, если посетитель запрашивает страницу Сћіпа5іїеѕ3.ћіті, вам 
необходимо взять основное содержимое из СНтаЗвез.Н т! и содержимое слайда из 
СптаЗНез3 5іае.һіті и каким-то образом объединить. 


Опытный программист может написать серверный сценарий, который перехватывает 
этот запрос и на лету выполняет сборку конечного содержимого из частей. Но если у 
вас нет хороших навыков программирования, вам нужно использовать другой подход. 


Самым простым решением будет создать отдельный файл для каждого ОВ, иными 
словами, в действительности создать файлы СһіпаЅіќеѕ1.Һті, СптаЗйе$2.НМи, 
Сһіпа5іїеѕ3.һіті и т. д. Конечно же, не следует дублировать содержимое слайда в не- 
скольких местах (например, как в СһіпаЅіїеѕ3.ћіті, так и в СптаЗйез3 ѕііае.Һіті), т. к. 
это создаст большую проблему с сопровождением таких страниц. К счастью, сущест- 
вуют два простых метода, которые могут упростить эту задачу. 
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Использование серверных вставок. Если ваш веб-сервер поддерживает этот 
метод (как делает большинство серверов), можно использовать специальную ин- 
струкцию: 


<1--#іпс1џаӢе Ё11е="Ғооіег.һҺіт1" --> 


Хотя эта строка выглядит, как будто комментарий, в действительности это инст- 
рукция веб-серверу открыть указанный файл и вставить его содержимое в этом 
месте разметки. Посредством этого метода можно вставить основное содержимое 
и содержимое слайда в страницу для каждого отдельного слайда. При этом чтобы 
создать основную оболочку страницы, потребуется всего лишь несколько строчек 
разметки в файле веб-страницы для каждого конкретного слайда (Сһіпа$їќеѕ1.Һті, 
Сһіпа5іїеѕ2.һті и т. д.). 


Использование шаблонов средства веб-разработки. Такие средства веб- 
разработки, как Ааобе Огеатмеауег и Місгоѕоћќ Ехргеѕѕіоп \\МеБ, позволяют форми- 
ровать шаблоны страниц, на основе которых можно создавать любое количество 
страниц со всеми исходными подробностями. Таким образом, создав шаблон с ос- 
новным содержимым и форматированием, на его основе можно легко и быстро по- 
строить все страницы для отдельных слайдов. 


ЧАСТЬ 1\ 


Приложения 


Приложение 1. Очень краткое введение в С$$ 


Приложение 2. Очень краткое введение в Јауа$сгірї 


ПРИЛОЖЕНИЕ 1 


Очень краткое введение 
в С$$ 


Мы нисколько не преувеличим, если скажем, что современный веб-дизайн был бы 
невозможен без стандарта С55 (Сазсадте ЗУ е Ѕһееѓѕ, каскадные таблицы стилей). 
Этот стандарт позволяет передать задачи форматирования любой сложности в рас- 
поряжение отдельному документу — таблице стилей (зе зВее®. Это делает раз- 
метку веб-страницы аккуратной, ясной и читаемой. 


Чтобы извлечь наибольшую пользу из стандарта НТМІ5 (и этой книги), нужно 
знать С55. Если у вас хороший уровень знаний в этой области, можно пропустить 
данное приложение и продолжать изучать остальной материал в этой книге, обра- 
щая особое внимание на главу 8, в которой представляются новые возможности 
форматирования, добавленные в С$53. Но если ваши навыки С$$ несколько заржа- 
вели, это приложение поможет вам освежить их, прежде чем продолжать изучение 
дальнейшего материала. 


ПРИМЕЧАНИЕ 


Это приложение содержит очень краткое, далеко не всеохватывающее, освещение 
стандарта С$$. Если после ознакомления с содержащимся в нем материалом вы все 
еще чувствуете себе неуверенным в этой области, прочитайте какую-либо книгу, в ко- 
торой предмет С$$ рассматривается более подробно. 


Добавление стилей в веб-страницу 


Существуют три способа добавления стилей на страницу. 


Первый — вставить информацию о стиле непосредственно в требующий формати- 
рования элемент разметки, используя атрибут зе у1е. Вот пример такого типа фор- 
матирования, которое изменяет цвет заголовка: 


<һ1 з6у1е="со1ог: дгееп">Іпііпе 5%у1ез аге 51орру 5%у1ез</в1> 
В то время как этот подход удобен, он ужасно засоряет разметку. 


Вторым подходом будет вставить всю таблицу стилей в элемент <зіу1Іе>, который 
помещается в блок <ћеаа> страницы: 


436 Приложение 1 


<реаа> 
<Е1Е1е>Епюедаеа Ѕёу1Іе Ѕһееі Теѕі</ііё1е> 
<ѕіу1Іе> 


</з+у1е> 

</веаа> 

Здесь форматирование страницы отделено от ее разметки, но оба эти компонента 
продолжают находиться в одном файле. Этот подход можно применять для однора- 
зовых задач форматирования (когда нет надобности использовать эти параметры 
для форматирования других страниц). Но страницы с применением этого метода 
получаются большого объема, вследствие чего он не очень подходит для настоя- 
щих, профессиональных веб-сайтов. 


А третий способ — это разместить форматирование в отдельном файле и связать 
его с форматируемой страницей, вставив элемент <1іпк> в блок <ћеаа> страницы. 
Вот пример кода, дающего указание браузеру применять стили из файла 
Ѕатріе$їу1еѕ.сѕ5: 


<Һеаа> 

<ііб1е>Ехёегпа1 Ѕёу1е Ѕһееі Теѕі</ііё1е> 

<1іпк ге1="ѕёу1еѕһееі" Һгеғ="ЅапрІеЅіу1еѕ.сѕѕ"> 
</Һћеаа> 


Это наиболее часто применяемый метод форматирования и при этом наиболее дей- 
ственный. Определенные таким образом стили можно использовать для формати- 
рования других страниц. При желании стили можно распределить между несколь- 
кими файлами, а страницу НТМІ связать с любым количеством файлов таблиц 
стилей. 


ПРИМЕЧАНИЕ 


Современный веб-дизайн зиждется на простой философии: НТМІ-разметка использу- 
ется для структурирования страницы в логические блоки (например, разделы, заго- 
ловки, списки, изображения и ссылки), а таблицы стилей С$5 применяются для фор- 
матирования страницы (указывая шрифты, цвета, поля, фон и позиционирование со- 
держимого). Следуйте этому правилу, и ваши страницы будут компактными и четкими, 
легко поддающимися редактированию. Использование таблиц стилей также позволяет 
изменить форматирование всего веб-сайта простой модификацией связанной с ним 
таблицы стилей. (В высшей степени впечатляющую демонстрацию магии таблиц сти- 
лей можно увидеть на сайте ммм.сѕѕгепдагаеп.сот, которому можно придать более 
чем 200 разных обликов, просто подключая другие таблицы стилей.) 


Анатомия таблицы стилей 


Таблица стилей — это текстовый файл, который помещается на веб-сервер вместе 
со страницами НТМІ. Файл содержит одно или несколько правил, порядок следо- 
вания которых в файле не имеет значения. 


Каждое правило определяет один или несколько аспектов форматирования одного 
или нескольких элементов НТМГ. Далее приводится структура простого правила 
стиля: 
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селектор { 
свойство: значение; 
свойство: значение; 


} 
Значения элементов правила следующие. 


П Селектор определяет тип содержимого, которое нужно форматировать. Браузер 
выискивает в странице все совпадающие с селектором элементы и применяет 
к ним указанное для данного селектора форматирование. Селектор можно ука- 
зывать многими разными способами, но одним из самых простых подходов 
(демонстрируемый в следующем примере) будет определение элементов, под- 
лежащих форматированию посредством названия этих элементов. Например, 
можно создать селектор, который выбирает в странице все заголовки первого 
уровня <һ1>. 


П Свойство определяет составляющую элемента, которую нужно форматировать. 
Это может быть цвет, шрифт, выравнивание содержимого ячейки и т. п. Правило 
может содержать любое количество свойств. 


П Значение определяет значение свойства. Например, если есть свойство со1ок, 
его значение может быть 1190 ріџе (светло-синий) или дтееп (зеленый). 


Вот пример правила для форматирования заголовка первого уровня: 


1 { 
Бехі-а1ідп: сепіег; 
со1ог: агееп; 


} 


Скопируйте это правило в текстовый файл и сохраните его с расширением с$$ (на- 
пример, Ѕатр1Іе$уІеѕ.сѕ5). Потом создайте простую веб-страницу, содержащую, по 
крайней мере, один заголовок первого уровня, и вставьте в нее элемент <1іпк> со 
ссылкой на этот файл таблицы стилей. Наконец, откройте эту страницу в браузере. 
Вы увидите, что все заголовки первого уровня будут зеленого цвета и выровнены 
по центру. 


Свойства С$$ 


В предыдущем примере правило таблицы стилей содержит два свойства: +ехе- 
а1ісп (горизонтальное выравнивание текста) и со1ог (цвет текста). 


Кроме этих двух, существует множество других свойств форматирования, наиболее 
употребляемые из которых приведены в табл. П1.1. Кстати, эта таблица содержит 
почти все свойства стилей, которые применяются в примерах этой книги (за ис- 
ключением новых свойств (С553, которые рассматриваются в главе 8). 


СОВЕТ 


Если у вас нет под рукой справочника по таблице стилей, для просмотра всех свойств, 
перечисленных в этой таблице (и многих других), воспользуйтесь сайтом 
мм\№.Һітіаод.сот/геѓегепсе/сѕѕргорейіеѕ. Здесь же можно узнать более подробную 
информацию о каждом свойстве, включая краткое описание его действия и разрешен- 
ные значения. 
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Таблица П1.1. Наиболее используемые свойства таблиц стилей 


Свойство Название 


Цвет со1ог, раскагоипа-со1ог 


Интервал пагаіп, раааіпо, тагдіп-1ІеЁі, магдіп-гісдћіё, тагдіп-іор, маха1п-БоЕ ом 


Границы рогаӢег-міаёћ, рогаег-ѕіу1е, рогдег-со1ог, рогаег (для установки шири- 
ны, стиля и цвета границ за один прием) 


Выравнивание Бехі-а1ісдп, ёехі-іпаепі, мога-зрасіпа, Іеёіег-зрасіпо, 1іпе-ћһеісћі, 
текста ућібе-ѕзрасе 


Шрифты Ғопё- Ёаті1у, Ёопі-ѕіхе, Ёопі-меісћі, Ғопі-ѕёу1е, Ёопё-уагіапі, 
Сехі-десогаібіоп, @Ғопё-Ғасе (для использования вычурных шрифтов; 
см. разд. "Типография для Интернета" главы 8) 


Размер міаёћ, Һеісһё 


Позиция розѕіііоп, 1еЕЕ, главе, Ғ1оа+, сепёег 


Графика раскагоџпа-ітаде, раскаогоцџпа-гереаі, раскаогоцџпа-розіёіоп 


Форматирование элементов посредством классов 


Приведенное ранее в качестве примера правило таблицы стилей форматирует В до- 
кументе все заголовки первого уровня. Но в более сложных документах может по- 
требоваться отформатировать только один элемент или разные группы элементов 
одного типа по-разному. 


Для решения ЭТОЙ задачи элементу присваивается название посредством атрибута 
с1а5$. Далее приведен пример форматирования с использованием класса элемента: 


<һ1 сІаѕѕ="АгіісІетіё1е">НТМІ5 1$ И1пп119</61> 


Теперь можно создать правило таблицы стилей, которое форматирует ТОЛЬКО ЭТОТ 
заголовок. В данном случае название селектора начинается с точки, после которой 
следует имя класса: 


.Агііс1Іетіё1е { 
ЕорЕ-Еаш11у: багапопа, зет1Ё; 
Ғопё-ѕіле: 40рх; 


} 


Теперь все элементы, которым посредством атрибута с1азз присвоено имя 
АгіісІетіі1е, будут отформатированы стилем, указанным в определении данного 
класса в таблице стилей. 


Атрибут с1аѕз можно использовать с любым количеством элементов. В действи- 
тельности, это и есть идея в основе использования классов. Типичная таблица сти- 
лей наполнена правилами классов, опрятно разбивающих разметку веб-страницы 
на блоки, к которым можно применять стили. 


Наконец, следует отметить, что можно создать селектор, использующий тип эле- 
мента и имя класса, как показано в следующем примере: 
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Һ1.Агііс1Іетііё1е { 
Ғопё-ѕіле: 40рх; 


} 


Данный селектор создает класс дгєісіетіб1е, который применим только для эле- 
ментов <һ1>. Иногда этот тип правила стилей служит просто для ясности. Напри- 
мер, разработчик хочет четко указать, что класс дгіісіетієіе применяется только 
для форматирования заголовков первого уровня, и не должен применяться для 
форматирования других элементов. Но в большинстве случаев веб-дизайнеры соз- 
дают простые классы, без привязки к определенным элементам. 


ПРИМЕЧАНИЕ 


Разные селекторы могут перекрывать друг друга. Если к одному и тому же элементу 
применяется несколько селекторов, используются стили, указанные в обоих этих се- 
лекторах, при этом наиболее общие применяются первыми. Если, например, имеется 
правило для всех заголовков и правило для класса дгїіс1Іеті+1е, первым применяет- 
ся правило для всех заголовков, а потом правило класса. В результате правило клас- 
са может затереть свойства, установленные правилом для всех заголовков. Если оба 
правила одинаково специфичны, выигрывает то, которое в таблице стилей определе- 
но последним. 


Комментарии в таблицах стилей 


В сложной таблице стилей иногда стоит делать заметки, чтобы напоминать себе 
(или дать знать другим) о причине создания правила и выполняемом им формати- 
ровании. Подобно НТМГ, С55 позволяет добавлять комментарии в таблицы сти- 
лей, которые игнорируются браузерами. Но комментарии С55 отличаются от ком- 
ментариев НТМГ. Они всегда начинаются с символов /*, а заканчиваются симво- 
лами */. Вот пример комментария С55: 


/* Заголовок основной статьи страницы. */ 
.Агііс1Іетіё1е { 
Ғопё-ѕіле: 40рх; 


Продвинутые таблицы стилей 


Мы рассмотрим пример таблицы стилей немного позднее, после того, как познако- 
мимся с некоторыми подробностями создания таблиц стилей. 


Структурирование страницы 
с помощью элементов <д/и> 


При работе с таблицами стилей часто приходится использовать элемент <аіу> в ка- 
честве контейнера для содержимого: 
<аіу> 

<р>Неге аге їмо рагадгарһѕ оЁ сопееп®.</р> 


<р>Іп а іу сопёаіпег.</р> 
</аіу> 
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Сам по себе элемент <аіу> ничего не делает, но он предоставляет удобное место 
для применения форматирования таблиц стилей на основе классов. Далее приведе- 
но несколько примеров. 


О Унаследованные значения. Некоторые свойства СЗЗ являются наследуемыми, 
т. е. значение, присвоенное одному элементу, автоматически присваивается всем 
элементам внутри этого элемента. Одним из примеров будет правило с набором 
свойств шрифта. Если применить такое правило к элементу <аіу>, весь текст 
внутри этого элемента получит данное форматирование (кроме элементов тек- 
ста, к которым могут быть применены отдельные правила форматирования). 


П Контейнеры. Элемент <аіу> — это естественный контейнер. Добавим к нему 
границы, интервалы и заливку фона (или изображение вместо заливки), и мы 
получим способ для выделения выбранного содержимого. 


П Колонки. Содержимое профессиональных веб-сайтов часто разбивается на две 
или три колонки. Один из способов осуществления этого — поместить содер- 
жимое каждой колонки в элемент <аіу>, а потом разместить каждый из этих 
элементов в требуемом месте с помощью свойств С$5 для позиционирования. 


СОВЕТ 


Теперь, когда спецификацией НТМЕ5 были введены семантические элементы, эле- 
мент <аіу> не играет такой центральной роли, как раньше. Если его можно заменить 
другим, более значащим семантическим элементом (например, <ћеадег> или 
<Ғісоге>), следует делать такую замену. Но когда не подходит никакой другой эле- 
мент, элемент <аіу> остается универсальным средством. Подробное описание всех 
новых семантических элементов см. в главе 2. 


Элемент <аіу> имеет младшего брата — <ѕрап>. Подобно элементу <аіу>, элемент 
<ѕрап> не имеет встроенного форматирования. Разница между этими двумя элемен- 
тами состоит в том, что элемент <аіу> служит контейнером для абзацев или блоков 
содержимого, а элемент <зрап> является строчным и служит контейнером для 
фрагментов содержимого меньшего размера внутри блочных элементов. Например, 
элемент <ѕрап> можно использовать для форматирования нескольких слов внутри 
абзаца. 


ПРИМЕЧАНИЕ 


Использование С$$ способствует качественному дизайну. Каким образом? Чтобы ис- 
пользовать С$$ эффективно, нужно должным образом спланировать структуру веб- 
страницы. Таким образом, необходимость использования СЗ$ вынуждает даже не- 
профессиональных веб-разработчиков подходить серьезно к организации содержимо- 
го своих веб-страниц. 


Множественные селекторы 


Правило таблицы стилей можно определить для нескольких элементов или классов. 
Для этого селекторы разделяются запятыми. 


Возьмем, например, следующие два разных уровня заголовка, которые имеют оди- 
наковый шрифт, но разного размера: 


Очень краткое введение в С$$ 441 


ҺІ { 
Ғопё-Ғаюмі1у: Іпрасі, Сһагсоа1, запз-зег1ЕЁ; 
Ғопё-ѕіле: 40рх; 

} 

62 { 
Ғопё-Ғаюмі1у: Іпрасі, Сһагсоа1, запз-зет1ЕЁ; 
Ғопё-ѕіле: 20рх; 


} 


Параметр Ғопі-Ғаті1у можно выделить в отдельное правило, которое применяется 
к заголовкам обоих уровней, а размер шрифта по-прежнему определяется отдель- 
ным правилом для каждого уровня: 


Һ1, Һ2 { Ғопё-Ғаті1у: Гирасе, Сһагсоа1, запз-зет1Е; } 
Һ1 { Ғопі-ѕіле: 40рх; } 
ћҺ2 { Ғопі-ѕіле: 20рх; } 


В этом отношении важно понимать, что такой дизайн не обязательно лучше. Часто 
разумнее дублировать параметры, т. к. это допускает наибольшую гибкость для из- 
менения форматирования в будущем, если это понадобится. Слишком много общих 
свойств усложняет модифицирование одного типа элемента или класса, не затраги- 
вая при этом другого. 


Контекстные селекторы 


Контекстный селектор применяет правило к элементу, расположенному внутри 
другого элемента. Далее приведен пример контекстного селектора: 
.Сопёепі 12 { 

со1ог: #24486; 


Ғопё-ѕіхе: тедіџт; 


} 


Этот селектор выбирает в разметке элемент класса сопғепе, а внутри этого элемен- 
та — элемент <һ2> и применяет к нему указанное в правиле форматирование. Вот 
пример элемента, который выбирается данным селектором: 


<аіу с1аѕѕ="Сопёепё"> 
<Һ2>Мауап роотѕӣау</һ2> 
</аіу> 
В этом примере контекстного селектора первый селектор является классом, а вто- 
рой — типом элемента. Но можно использовать любую комбинацию селекторов 


класса и типов элемента. Например, далее приведен пример контекстного селектора 
ДЛЯ комбинации классов: 


.Сопіепё .Іеааїп { 
Ғопё-уагіапі: зта11-сарѕ; 
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Этот селектор выбирает в разметке элемент класса сСопѓепі, а внутри этого элемен- 
та — элемент класса теааТп. Далее приведен пример элемента, который выбирается 
данным селектором: 


<аіу с1аѕѕ="Сопёепё"> 
<р><зрап с1аѕѕ="Іеааїп">Бісһё пом</ѕрап>, уоџ'ге ргорар1Іу Ғее1іпа 
ргеїіёу сдооа. А#Ғбег а11, 11Ее іп һе аеуе1ореа мог1а 13 
сомЁогёар1Іе ...</р> 


</аіу> 


Немного попрактиковавшись с контекстными селекторами, вы увидите, что они 
довольно простые и очень полезные. 


Идентификаторы 


Селекторы классов имеют близких родственников — идентификаторы (или 
Ш-селекторами). Подобно селектору класса, идентификатор позволяет применять 
форматирование только к выбранным элементам. Также подобно селектору класса, 
идентификатору можно присвоить описательное имя. Но вместо точки название 
идентификатора начинается с символа #: 


#Мепи { 
рогаег-міаєһ: 2рх; 
рогаӢег-зёуІе: зо1іа; 
} 


Какис правилами классов, браузеры используют правила идентификаторов ТОЛЬКО 
при условии их явного указания в разметке, для чего предназначен атрибут іа эле- 
мента. Например, следующий код применяет определенное ранее правило #Мепи 
к элементу <аіу>: 


<аіу іа="Мепи">...</4іу> 


Сейчас вы, наверное, задаете себе вопрос: какая же разница между селекторами 
класса и идентификаторами, т. к. последний кажется в точности таким же, как и 
первый? Разница следующая: данный идентификатор можно присвоить только од- 
ному элементу на странице. Для нашего примера это означает, что только одному 
элементу <адіу> можно присвоить идентификатор мепи. Это ограничение не распро- 
страняется на имена классов, которые можно применять с неограниченным числом 
элементов. 


Таким образом, идентификатор разумно выбирать, если нужно отформатировать 
один никогда не повторяющийся элемент на странице. Преимущество использова- 
ния для этого идентификатора вместо селектора класса состоит в том, что первый 
явно указывает особую важность данного элемента. Например, если в разметке 
имеется идентификатор мепо или МауідасіопВаг, разработчик знает, что данная 
страница имеет лишь одно меню или навигационную панель. Конечно же, приме- 
нение идентификаторов вовсе не является обязательным. Некоторые веб-раз- 
работчики используют селекторы класса для всего подряд, независимо, является 
блок уникальным или нет. По сути, это всего лишь вопрос личных предпочтений. 
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ПРИМЕЧАНИЕ 


Атрибут іа также играет важную роль в Јаха5сгірї, позволяя разработчику выделить 
конкретный элемент для манипулирования им посредством кода. В примерах в этой 
книге применяются правила идентификаторов во всех случаях, когда элемент уже 
имеет атрибут іа для Јауа$сгірі. Это позволяет избежать одновременного использо- 
вания обоих атрибутов — іа и с1аѕѕ. Во всех других случаях применяются правила 
класса независимо от того, является элемент единственным или нет. 


Селекторы псевдоклассов 


До сих пор все рассматриваемые нами селекторы были простыми. В них ДЛЯ выбо- 
ра элемента учитывается один явный тип информации, например тип элемента, 
название класса или идентификатора. Селекторы псевдоклассов несколько послож- 
нее. В них принимается во внимание дополнительная информация, такая, которая 
может и не указываться в разметке или, возможно, основана на действиях ПОЛЬЗо- 
вателя. 


На протяжении существования С55 браузеры поддерживали всего лишь несколько 
псевдоклассов, которые в основном предназначались для форматирования ссылок. 
Псевдокласс :1іпк форматирует все непосещенные ссылки. Псевдокласс 
:уіѕісеа — все посещенные ссылки. Псевдокласс :һоуег форматирует ссылку, на 
которую пользователь навел указатель мыши, а псевдокласс :асєіуе форматирует 
ссылку, по которой пользователь щелкнул, но еще не отпустил кнопку мыши. Как 
можно видеть, названия псевдоклассов всегда начинаются с двоеточия. 


Для практики рассмотрим правило таблицы стилей, которое использует псевдо- 
классы для создания страницы и вводит посетителя в заблуждение — Посещенные 
ССЫЛКИ отображаются синим цветом, а непосещенные — красным (т. е. противопо- 
ложно тому, как это делается в действительности): 


а:1іпк { со1ог: геа; } 
а:уіѕіёеа { со1ог: Бе; } 
С псевдоклассами также можно использовать имена классов: 


.Васкмагаііпк:1іпк { 
со10ог: геа; 
} 


.Васкмагаііпк:уіѕіёеа { 


со1ог: рое; 


} 


Теперь элемент привязки должен указать имя класса, чтобы отображать НОВЫЙ 
СТИЛЬ: 


<а сІаѕѕ="Васкмагашіпк" Һгеғ="...">...</а> 


Псевдоклассы служат не только для форматирования ссылок. Так, псевдокласс 
:Һоуег полезен для эффектов анимации и создания вычурных кнопок. Этот псевдо- 
класс используется с возможностями перехода (см. разд. "Создание эффектов 
перехода" главы 8). 
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ПРИМЕЧАНИЕ 


Спецификация С$$3 вводит несколько более продвинутых псевдоклассов, которые 
принимают во внимание иные подробности, например позицию элемента относитель- 
но других элементов или состояние элемента управления 1про+ в веб-форме. Эти 
псевдоклассы не рассматриваются в данной книге, но вы можете узнать о них больше 
в статье журнала "Ѕтаѕћіпо Мадатте" на сайте һір://іпуиг!.сот/3р28%аи'. 


Селекторы атрибутов 


Спецификация С$53 определяет новую возможность выбора атрибутов, позволяю- 
щую форматировать конкретный тип элемента, одному из атрибутов которого при- 
своено специфическое значение. Рассмотрим, например, правило, которое приме- 
нимо только к текстовым полям: 

іприї [іуре="ёехЕ"] { 


раскагоџпа-со1ог:ѕі1Іуег; 


} 


Сначала этот селектор выбирает все элементы <іприї>, а потом среди этих элемен- 
тов выбирает и форматирует только те, у которых значение атрибута єуре равно 
сехе. В отношении следующей разметки это означает, что первый элемент <іприё> 
получит фон серебристого цвета, но второй — нет: 


<1аре1 Еох="раце">Маме :</1аре1><1приЕ 149="раще" буре="ёехі"><рг> 
<1праЕ ёуре="ѕиртіё" уа1ае="ОК"> 


Указывать значение атрибута +уре="+ехе" в первом элементе <іпроє> необязатель- 
но, т. к. это значение по умолчанию. Если не указать это значение, селектор атри- 
бута будет все равно работать, т. к. он руководствуется текущим значением атрибу- 
та, и ему безразлично, как это значение установлено в разметке. 


Аналогично можно создать правило, которое форматирует надпись для этого тек- 
стового поля, но игнорирует все другие надписи: 


Іаре1 [Еох="паше" ] { 
міаєһ: 200рх; 


ПРИМЕЧАНИЕ 


Селекторы атрибутов можно применять и более изобретательно. Например, можно 
составить правило для выбора элемента по комбинации значений атрибутов или же 
по части значения атрибута. Такие методы оригинальны, но слишком усложняют 
обычную таблицу стилей. Подробную информацию см. в стандарте С$$3 для селек- 
торов по адресу мм^а.мЗ.огд/ТВ/сѕ53-ѕеіесіогѕ/#ѕеіесїогѕ. 


! Вообще даже в русскоязычном сегменте Интернета можно найти массу статей по этому поводу. Дос- 
таточно в поисковой строке любой поисковой системы набрать запрос "как использовать псевдоклас- 
сы С$5$3" или "псевдоклассы С553", и вашему вниманию будет предложен длинный список найден- 
ных ссылок. — Ред. 
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Экскурсия по таблице стилей 


В главе 2 рассматривается использование новых семантических элементов НТМІ 5, 
модифицирующих простую, но аккуратно отформатированную страницу 
Ароса!урзеРазе_Опетаг Ве (рис. П1.1). 


С | чет 
У плесень х 2 ______ 


є С О не///С/НТМІ5/Сһарїег%2002/АросаІурѕеРаде_Огідіпа!.Һіті х А 


Ном тре Могіа Соиіа Епа 


Виснт мом, уоц'те ргоБаЫу {ееНпз ргебу вооа. АЁег ај, іѓе іп ће деуеіореа уогіа 15 
сотќѓогіаЫе—ргођаЫу тоге сотѓогіаЫе һап #'з Бееп ог ће ауегазе һитап Без {һгоцесһоиѓ 
а оЁгесогӣеа һіѕіогу. 


Вш аоп'ї зе {оо зтив. Тһеге'ѕ 511 рІепіу оЁһоггійс мауѕ її соша а! #а1 арагі. Іп #һіѕ агісіе, 
уои" Іеагп ађоиї а ѓеуу оЁ оиг Ёауогііеѕ. 


Мауап Ооотѕӣау 

ЅКеріісѕ ѕиссеѕї ћаї ће Мауап са]епдаг ѕітріу го їо а пеу 5,126-уеаг ега айег 2012, апа 
доеѕп' асіџаПу ргейісї а іѓе-епаіпо ароса]урзе. Виї ріуеп іћаї ће Іопо-еаа Мауапѕ уеге мгопс 
аһоиї уігішаПу еуегуф а е1ѕе, мпу зһоша уе їгиѕї {Пет оп #һіѕ? 


БКоБої ТаКеоуег 

М№ої диНе аз гісімепіпс аз а Уатріге ТаКеоуег ог уіпс-Реай Такеоуег, а гођої геђеШоп 15 = 
а 91зашециа іћоцсћ. Ме аге аЇгеайу оџіпитђегеа Ьу оџг їесһпоЇовіса! вайсеїѕ, апа еуеп ВШ 
Са{ез Ғеагѕ Һе дау һіѕ Јарапеѕе гоһої з1ауе їшгпѕ Вип оуег Бу ће апИеѕ апа азКз (іп а ѕзийќаЫу 
гођойс уоісе) "Мћо'ѕ уоиг дайду пом?" 


Опехріаіпей Ѕіпешагіќу 
Ме доп” Кпоуу һом ће ишуегзе ѕѓагіей, зо уе сап'+ Бе зиге # мгоп” јиѕї епі, тауЪе {одау, апа 
тауфе ми пот тоге ехсйптз ап а рий оЁапіі-тайќег апа а 51ісћї ћггіпо позе. 


Випам’ау Сітаќе Сһапғе 
Ріѕтіѕѕеа Бу ѕоте, А] Соге'ѕ ргорНесу оѓ іоот тау 51 соте їгие. И ії 4оез, ме тау һауе їо 
сопќепа мВ уісіоиѕ зїогтѕ, уійеѕргеааӣ оо4 зпомавез, апа ѕигіу аіг соп@ Нотта гераігтеп. 


СіоЬаі Ерійетіс 

Ѕоте те іп {ће ѓџќџге, а Іећа! уігиѕ соша ѕігіке. Ргейісіопѕ діЌег або: {ће зоигсе оЁ ће 
діѕеаѕе, Би{ сапаіаѓеѕ іпсіиде топКеуз іп ће Аёгісап апе, Ьіоѓеггогіѕіѕ, Ьігаѕ апа рісѕ уїйћ 
е Йц, уаггіогѕ гот ће ѓиѓџге, ап аіеп гасе, һоѕріќа!ѕ һаї изе їоо тапу апібіоіісѕ, уатрігеѕ, 
{Ве СТА, апа ипуаѕћей Ьгиѕѕе! ѕзргоиіѕ. Мћаѓеуег е зоигсе, #5 сІеагіу Баа пеуѕ. 


Трезе аросаіурііс ргейістіопз бо пог гейест гђе иіенз оѓ ће аићог. 


АБошт 05 Оіѕсіаітег Сопкасе И 
Соруғідћ: © 2011 


Рис. П1.1. На этой странице используются простые стили, но они следуют основным 
организационным принципам, которые применяются на практике при изложении материала этой книги 


Эта страница связана с таблицей стилей АросаіурѕеРаре ОпіоіпаІ.сѕѕ: 


<!РОСТУРЕ һёт1> 
<Һіті 1апа="еп"> 
<Һеаа> 
<Е1Е1е>Ароса1урзе Мом</&1Е1е> 
<1іпк ге1="ѕіуІеѕһееі" ВгеЕ="Ароса1урзеРаде Огідіпа1.сѕѕ"> 
</ЉҺеаа> 


Это простая и сравнительно краткая таблица стилей, насчитывающая 50 с лишним 
строк кода. В этом разделе мы рассмотрим каждое из содержащихся в ней правил. 
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Таблица стилей начинается с правила, нацеленного на элемент <ооду>, который яв- 
ляется корневым элементом всей веб-страницы. Это лучшее место для определения 
наследуемых значений, которые нужно применять по умолчанию ко всему доку- 
менту, т. е. к полям, отбивкам, цвету фона, шрифтам и ширине: 


роау { 
Ғопё-Ғаюмі1у: "Гас1Ча Ѕапѕ Опісоаде", "Іџсіаа Сгапае", Сепеуа, ѕапѕ-ѕегії; 
пах-міаёһ: 800рх; 

} 


Устанавливая в С585 свойство ғопе-ғҒапі1у, нужно следовать двум правилам. Пер- 
вое: шрифт должен быть пригодным для веб-страниц — один из немногих шриф- 
тов, о которых заведомо известно, что они работают практически на всех подклю- 
ченных к Интернету компьютерах (список основных шрифтов см. на сайте 
Һер://уууууу.Ѓопќеѕќег.сот/Ље/ІрЛіѕ_оЁ уер _ѕаѓе ѓопіѕ.һ], а другие, более риско- 
ванные шрифты, см. на сайте һр://уугу.ѕреаКкіпо-іп-ѕуІеѕ.сот/уүуер-уросгарһу/ 
Ууер-Ѕаѓе-Еопќѕ). Второе: список шрифтов должен начинаться с конкретного вари- 
анта шрифта, за которым следуют возможные резервные шрифты. В конце списка 
указывается инструкция ѕегіғ ИЛИ ѕапз-ѕегіғ (две инструкции для шрифтов, кото- 
рые поддерживаются всеми браузерами). Если вы хотите использовать вычурный 
шрифт, который посетитель должен загрузить с вашего веб-сервера, ознакомьтесь 
с возможностью С553 для внедрения шрифтов, рассматриваемой в разд. "Типо- 
графия для Интернета" главы 8. 


Правило для элемента <роау> также устанавливает максимальную ширину в 
800 пикселов. Таким способом предотвращается использование длинных, трудно- 
читаемых строк текста, когда окно браузера разворачивается на всю ширину экрана. 
Эту проблему также можно решить другими методами, включая разбиение текста 
на колонки (см. разд. "Размещение текста в несколько колонок" главы 8), исполь- 
зование запросов о возможностях (см. разд. "Запросы о возможностях отображе- 
ния" главы 8) или создание дополнительных колонок, чтобы заполнить свободное 
пространство. Но хотя установка фиксированной ширины в 800 пикселов — не са- 
мое привлекательное решение, оно является наиболее распространенным. 


Далее определяется правило для класса, которое форматирует область верхнего ко- 
лонтитула страницы: 


.Неадег { 
Баскагоипа-со1от: #7695ЕЕ; 
Богаег: Єһіп #336699 зо11а; 
раааіпд: 10рх; 
пагдіп: 10рх; 


Бехі-а1ідп: сепіег; 


ПРИМЕЧАНИЕ 


В первоначальном примере (использованном здесь) для размещения колонтитула 
применяется простой элемент <адіу>, которому присвоено имя класса Неадег. Но в 
главе 2 рассматривается возможность использования вместо этого элемента нового 
НТМЕ5-элемента <зеааег>. 
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Это правило содержит большой объем информации. Свойство раскогоџпа-сої1ог 
можно установить, подобно всем цветам С$5, используя название цвета (что дает 
сравнительно небольшой выбор цветов), код НТМГ-цвета (как сделано в этом при- 
мере) или функцию гс () (в параметрах которой указываются красная, зеленая и 
синяя составляющие цвета). В примерах этой книги применяются все три подхода, 
при этом метод с названиями цветов используется в простых примерах, а функция 
гор () в более сложных. 


Кстати, все НТМІ -цвета можно представить с помощью функции гор () и наоборот. 
Например, цвет в предыдущем примере можно указать посредством функции гор () 
так: 


раскагоипа-со1Тог: гор (118,149,254); 


СОВЕТ 


Получить значения КСВ для требуемого цвета можно с помощью онлайнового цвето- 
подборщика или же посредством какой-либо графической программы, хотя бы Ра. 


В правиле для колонтитула также определяется тонкая граница вдоль его края. Для 
этого используется "все в одном" свойство рогаег, посредством которого устанав- 
ливается толщина и цвет границ, а также их стиль (например, ѕо1іа — сплошная, 
даѕћеа — штриховая, аосееа — пунктирная, доир1е — двойная, сгооуе — с выем- 
кой, г1аде — рельефная, іпѕе ИЛИ оџёѕеє — псевдотрехмерная). 


После фона и границ устанавливается отбивка (рада1па) в 10 пикселов (расстояние 
между содержимым блока верхнего колонтитула и его границами), а потом поля 
(паха1п) в 10 пикселов (расстояние между границами колонтитула и границами веб- 
страницы). Наконец, свойству кехе-а11ат присваивается значение, центрирующее 
по горизонтали текст внутри колонтитула. 


В представленных далее трех правилах используются контекстные селекторы для 
форматирования элементов внутри верхнего колонтитула. Следующее правило 
форматирует заголовки первого уровня (элементы <һ1>) внутри верхнего колонти- 
тула: 


.Неадег [1 { 
пагдіп: 0рх; 
со1ог: мһіёе; 


Ғопё-ѕіле: хх-1агае; 


СОВЕТ 


Размер шрифта можно указывать посредством ключевых слов (как значение хх-1 атое 
в этом примере). Точный размер можно указывать в пикселах или ет-единицах. 


Следующие два правила форматируют классы .Теаѕег И .Ву1іпе: 
.Неадег .Теаѕег { 

пагдіп: 0рх; 

Ғопё-меідһё: ро1а; 
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.Неааег .Ву11пе { 
Ғопё-зіу1е: 16а11с; 
ЕопЕ-$17е: зта11; 
пагдіп: 0рх; 


} 


Эти правила применяются для двух <р>-элементов колонтитула. Один элемент <р> 
содержит подзаголовок и принадлежит подклассу Теазег класса Неадег. А второй 
элемент <р> содержит информацию об авторе статьи и принадлежит подклассу 
Ву11пе класса Неааег: 


<аіу с1азѕ="Неайег"> 
<Һ1>Ном һе Мог1А Соџіа Епа</ћ1> 
<р сІаѕѕ="Теаѕер">5сепагіоѕ һа зре11 һе епа ої 1іѓе аз ме Кром</р> 


<р сІаѕѕ="Ву1іпе">ру Вау М. Сагпаііоп</р> 
</аіу> 


Следующее правило форматирует элемент <аіу>, принадлежащий классу сопеепе и 
содержащий основное тело страницы. Правило устанавливает шрифт, поля между 
содержимым и границами окна и высоту строк: 


.Сопіепі { 
ЕопЕ-$17е: шеалам; 
Ғопё-Ғаюмі1у: Сапогіа, Сосһіп, беогодіа, "Тітеѕ Мем БКотап", Т1мез, ѕегій; 
раааіпа-ёор: 20рх; 
раааіпа-гідһё: 50рх; 
раааіпод-роёёот: 5рх; 
рааа1та-1еЕ®: 50рх; 
Ііпе-һеідћё: 120%; 
} 


В то время как для колонтитула установлены одинаковые поля по всем сторонам, 
в содержимом для каждой стороны устанавливаются разные поля, добавляющие 
дополнительные интервалы вверху и еще большие по сторонам. Один из способов 
сделать это — использовать расширенные свойства поля (т. е. рааа1па-кор, рада+па- 
гідће и т. д.), как представлено в данном правиле. Другой способ — присвоить 
свойству радаіпо список значений ширины каждого поля, но здесь нужно помнить 
правильный порядок этих полей — верхнее, правое, нижнее, левое: 


раааіпод: 20рх 50рх 5рх 50рх; 


Обычно этот метод применяется, когда нужно указать поля для всех сторон, а если 
требуется задать поле только для некоторых сторон, применяется метод расширен- 
НЫХ СВОЙСТВ раааіпа. Но по большому счету, это всего лишь вопрос личных пред- 
почтений программиста. 


Последнее СВОЙСТВО Ііпе-һеідһі устанавливает интервал между смежными 
строками текста. Значение 120% добавляет дополнительный промежуток между 
строк, что делает текст более удобным для чтения. 
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За правилом форматирования содержимого идут три контекстных селектора для 
внутреннего форматирования. Первое правило форматирует блок класса теаатп, 
в частности, устанавливая полужирную капитель большого размера: 
.Сопіепё .Іеааїп { 

Ғопё-меідһё: Юо1а; 

Ғопё-ѕіхе: Іагде; 

Ғопё-уагіапі: зпа11-сарз; 
} 
Следующие два правила форматируют элементы <һ2> и <р> в основном содер- 
ЖИМоМ: 


„.Сопбепе 12 { 
со1ог: #24486С; 
пагдіп-роёбот: 2рх; 
Ғопё-ѕіғе: педӢіцт; 

} 

.Сопёепі р { 


пагдіп-іор: 0рх; 
} 
Как ВИДНО, ХОТЯ таблица стилей становится длиннее, она не обязательно усложня- 
ется. В ней просто повторяются те же основные методы (селекторы класса и кон- 
текстные селекторы) для форматирования разных частей документа. 


Таблица стилей завершается тремя правилами для форматирования нижнего колон- 
титула. К этому времени вы должны уже понимать определяемое в нем форматиро- 
вание: 
.Бооіег { 
Ббехі-а1ідп: сепіег; 
Ғопё-ѕіле: х-зпа11; 
} 
.Еооёег .різс1аітег { 
Ғопё-зіу1е: 16а11с; 
} 
.Бооїег р { 
пагдіп: Зрх; 


} 


Ну вот, мы и рассмотрели таблицу стилей АросаурзеРазе Опоіпа1.сѕѕ. Можете 
загрузить ее с сайта книги (Һќр://уууу.ргоѕеќесһ.сот/Љіті5/) и попробовать по- 
экспериментировать с ней, наблюдая получаемые изменения. Или же можете озна- 
комиться с материалом в главе 2, в котором эта страница и ее сопутствующая 
таблица стилей модифицируются для использования семантических элементов 


НТМГ5. 


ПРИЛОЖЕНИЕ 2 


Очень краткое введение 
в Чауа5 сир 


Было время, когда весь Интернет состоял исключительно из разметки. Страницы 
содержали только НТМГ-теги и текст, и ничего больше. По настоящему продвину- 
тые веб-сайты использовали серверные сценарии, которые могли немного настро- 
ить разметку НТМЕ перед тем, как отправлять ее браузеру. Но это всё. 


Откройте страницу в текстовом редакторе сегодня, и вы, скорее всего, увидите ку- 
чи кода Јауа8сгірі, приводящего в движение все — от необходимых функциональ- 
ностей до мелких примочек. Самозаполняющиеся поля ввода, всплывающие меню, 
слайд-шоу и электронная почта с веб-интерфейсом — вот лишь несколько приме- 
ров использования ЈауаЅсгірі хитроумными разработчиками. В действительности, 
современный Интернет практически невозможно представить без Јауа$сгірі. В то 
время как НТМІ остается каркасом Интернета, интеллектом, оживляющим боль- 
шинство его продвинутых страниц, является Лауаб стр. 


Это приложение предлагает ускоренный вводный курс в Лауа5спре. Оно не является 
полным руководством по использованию ЈауаЅсгірї и не содержит достаточно ин- 
формации, чтобы позволить вам начать работать с этим языком, если у вас нет аб- 
солютно никаких знаний другого языка программирования. Но если вы обладаете 
хоть малейшими знаниями программирования — например, когда-то немного про- 
граммировали на Уіѕџа! Ваѕіс, освоили основы Раѕса] или экспериментировали 
с языком С, тогда это приложение позволит вам перенести приобретенные навыки 
в мир ЛауаЗспре. Оно содержит как раз достаточно информации, чтобы позволить 
вам узнать знакомые концепты программирования, такие как переменные, циклы и 
условные переходы. Также в нем охватываются все основные элементы языка, ко- 
торые используются в примерах на основе ЈауаЅсгірі в остальном материале этой 
КНИГИ. 


СОВЕТ 


Если вам требуется более полная помощь по Јаха$сгірї, можете найдите книгу о по- 
пулярном инструментарии |Оицегу для расширения возможностей Јауа$сгірї. Или же 
прочитайте подробное, но сухое руководство по Јауа$сгірі от Мо7Ша, доступное по ад- 
ресу ћ№ір://аеуеІорег.то2а.огд/еп/ЈахуаЅсгірі/биійе. 
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Принципы работы Јаха$сгірї 
в веб-странице 


Чтобы код ЈауаЅстірї правильно работал в веб-странице, он должен быть помещен в 
нее должным образом. В этом вопросе ключевым является элемент <эсгір+>. В по- 
следующих разделах мы рассмотрим разные способы оснащения страницы кодом 
Тауабспрь от быстрой вставки небольших фрагментов кода непосредственно в лю- 
бое место веб-страницы до тщательно структурированных программ, помещенных 
в отдельный файл. 


Вставка кода в разметку 


Самый простой способ добавления Јауа$сгірі-кода в страницу — это вставка его 
куда-либо в разметку НТМІ между тегами <ѕсгірё>: 


<!РОСТУРЕ Һёт1> 
<Һіті 1апа="еп"> 
<Һеаа> 
<пефа сһагѕеі="об#-8"> 
<ііЄ1е>А 51тр1е ЈауаЅсгірі Ехапріе</+іё1е> 
</ћеаа> 


<роау> 


<р>АЕ зопе роіпі іп һе ргосеѕѕіпд оЕЁ {13 раде, а ѕсгірі р1Іоск 
№111 гоп апа ѕћот а меззаде рох.</р> 


<5ѕсгірі> 


аїегі ("Ме іпіеггирё іһіѕ мер раде мііһ а зрес1а1 " + 
"ЈауаЅсгірё аппоџпсетепі."); 


</ѕсгірі> 


<р>ТЕ уоџ де һеге, уоцџ'уе а1геайу зееп 1&.</р> 
</роду> 
</ћіт1> 


Данный сценарий содержит только одну строку кода, хотя он с таким же успехом 
мог бы иметь целый ряд операций. В данном случае эта строка кода активирует 
встроенную функцию Јауа$сгірї аіег+ (). Эта функция принимает в качестве пара- 
метра строку текста, который и отображает в окне сообщения (рис. П2.1). Чтобы 
закрыть окно, нужно нажать кнопку ОК. 


ПРИМЕЧАНИЕ 


В данном примере вводится соглашение Јауа$сгірі, которое применяется во всем ма- 
териале этой книги и на профессиональных веб-сайтах: конечная точка с запятой. 
В языке Јама$сгірї точка с запятой указывает на завершение оператора. Строго гово- 
ря, использование точки с запятой не является обязательным (если только вы не хо- 
тите влепить несколько операторов в одну строку), но считается хорошим стилем про- 
граммирования. 
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(=>) а САНТМІЎ\Аррепаїх В\5ітріеЈауаЅстірї.Һёті р- ёх 


ё А 51тріе ЈамаЅсгірі Ехатріе | и | 


Ат ѕоте рони іп ће ргосеѕѕіпо оЁ 11$ расе, а ѕсгірі ЫосК мл гоп апа зНо\у а 
теѕѕасе бох. 


Меззаде тот мерраде = 


А Ме іпёеггирї #ћіѕ меб раде мВ а ѕресіа! }ама5спр® аппоипсетепі, 


9 100% ~ 


Рис. П2.1. Когда в процессе обработки веб-страницы браузер наталкивается на код Јауа$сгірі, 


он его немедленно исполняет. Более того, на время исполнения кода Јауа5сгірї временно прекращается 
вся другая обработка страницы. В данном примере дальнейшее исполнение кода приостановлено до тех 
пор, пока не будет должным образом закрыто окно сообщения, для чего нужно нажать кнопку ОК. 


После этого код продолжит исполнение (в данном примере просто завершит исполнение), 
а браузер вернется к обработке следующей за кодом разметки 


Как правило, разумно помещать код, исполняющийся с загрузкой страницы (как в 
нашем примере), в конце блока <ройу> непосредственно перед закрывающим тегом 
</ъоау>. Таким образом, браузер будет исполнять его только после обработки всей 
разметки страницы. 


МАЛОИЗВЕСТНАЯ ИЛИ НЕДООЦЕНЕННАЯ ВОЗМОЖНОСТЬ 
Успокоительное для параноидного [тете Ехр/огег 


Рассмотренный пример исполняется без проблем в таких браузерах, как Еігеїох или 
Сһготе, чего нельзя сказать об Іпіегпеї Ехріогег. При попытке запустить его в этом 
браузере Іпќегпеї Ехріогег выводит вверху окна желтую полосу с предупреждением 
о блокировании активного содержимого. До тех пор пока пользователь не щелкнул по 
этой полосе и в последующих диалогах не разрешил исполнение активного содержи- 
мого данным файлом, содержащийся в нем код Јама$сгірі не будет исполняться. 


С первого взгляда может показаться, что такая реакция |щете{ Ехрогег на безобид- 
ный фрагмент кода наверняка отпугнет от страницы потенциальных посетителей. Но 
не стоит беспокоиться по этому поводу, т. к. Іпіегпеі Ехріогег проявляет эту бдитель- 
ность только тогда, когда файл запускается локально. Когда та же страница предос- 
тавляется веб-сервером, то Іпіегпеї Ехр!огег не имеет против нее ни малейших возра- 
жений. 

Но при всем этом вся процедура с предупреждениями и разрешениями исполнения 
является довольно раздражающей при тестировании веб-страницы. Эта проблема 
решается путем указания Іпќегпеї Ехріогег считать, что страница предоставляется веб- 
сервером. Для этого в блок <ћеаа> страницы добавляется метка МОТ\М (см. также 
разд. "Добавление Лауа$спрЕкода" главы 1): 


<реаа> 
<пе+а срагзеф="аЕЕ-8"> 


Очень краткое введение в ЛамаЗспрё 453 
<!-- ѕауеа Егом иг1= (0014) ароџё:іпёегпеё --> 
</ћеаа> 
Браузер Іпіегпеї ЕхрІогег обрабатывает страницы, содержащие метку МОТУМҮ, как буд- 
то бы они были предоставлены веб-сервером, исполняя содержащийся в них код 


Јауа$сгірї без проволочек. Для всех остальных браузеров эта метка выглядит просто 
как обычный комментарий НТМЕ. 


Использование функций 


Проблема с предыдущим примером состоит в том, что такой подход смешивает 
разметку и код в одну кучу. Чтобы навести в странице некоторый порядок, код для 
выполнения отдельной задачи следует помещать в функцию — именованный фраг- 
мент кода, который исполняется по требованию. 


Будет хорошей идеей присваивать функции логическое название, отображающее ее 
назначение. Вот пример создания функции: 


Ғипсііоп ѕзһомМеѕѕаде () { 
// Код вставляется сюда 


} 


На данном этапе эта функция содержит лишь один комментарий и никакого кода. 
(В ЈауаЅсгірі однострочные комментарии обозначаются двумя косыми чертами. 
Браузеры игнорируют строки, начинающиеся этими символами.) 


Код для выполнения требуемой задачи вставляется между фигурными скобками, 
как показано в следующем примере: 


Ғипсііоп ѕзһомМеѕѕаде () { 


а1егі ("Ме іпбеггорі 013 мер раде міёһ а зрес1а1 " + 
"Јауаѕсгірі аппоппсемере.") ; 


} 


Конечно же, все это должно заключаться в блок <ѕсгірё>. Лучше всего размещать 
функции Јауа$сгірї в блоке <веад> страницы. Таким образом, мы придаем странице 
организованность, убрав код из разметки и поместив его в отдельный блок стра- 
НИЦЫ. 


Далее приведен предыдущий пример, модифицированный для использования 
функции: 


<!РОСТУРЕ 61 > 

<ҺЕпі 1апа="еп"> 

<Һеаа> 
<пефа сһагѕеі="оЁ#-8"> 
<ііЄ1е>А 51тр1е ЈауаЅсгірі Ехапріе</+іё1е> 
<5ѕсгірі> 


ЕипсЕ1оп ѕҺомМеѕѕаде () { 


а1їегі ("Ме іпіеггирё һіѕ мер раде мііһ а зрес1а1 " + 
"ЈауаЅсгірі аппоџпсетепі."); 
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</ѕсгірі> 
</Һћеаа> 


Сами по себе функции ничего не делают. Чтобы исполнить код в функции, ее нуж- 
но вызвать другим фрагментом кода. 


Вызов функции не представляет ничего сложного; мы уже видели, как это делается 
в случае со встроенной функцией а1егї (). Чтобы вызвать функцию, мы просто 
пишем ее имя, а потом пару круглых скобок. В скобках функции передаются дан- 
ные, которые могут потребоваться ей. Если же функции не нужно передавать ника- 
ких данных, как для нашей функции ѕћокмеѕзасе (), то скобки просто оставляются 
пустыми: 


<роау> 
<р>АЕ зопе роіпі іп һе ргосеѕѕіпд оЕЁ {13 раде, а ѕсгірі р1Іоск 
№111 гоп ара зВом а меззаде рох.</р> 
<5ѕсгірі> 
ѕҺомМеѕѕаде () ; 
</ѕсгірі> 
<р>ТЕ уой деф Һеге, уоџ'уе а1геаЯу зееп іі.</р> 
</роду> 
</ћіт1> 


С первого взгляда может показаться, что поскольку этот НОВЫЙ подход использует 
два блока кода, он усложняет код. Нов действительности это большой шаг вперед 
по нескольким причинам, включая следующие. 


П Основная масса кода теперь удалена из разметки. Все, что осталось от кода 
в разметке теперь, — это только одна строка для вызова функции. В отличие от 
функции в нашем примере, настоящая функция будет содержать кучу кода, а на- 
стоящая страница — много функций. Поэтому удаление всех этих подробностей 
из разметки, несомненно, улучшит ее. 


О Код можно повторно использовать. Поместив код для выполнения определен- 
ной задачи в функцию, мы можем вызывать этот код неограниченное количест- 
во раз из разных мест страницы. В данном примере это не так очевидно, но эта 
возможность является важным фактором в более сложных приложениях, напо- 
добие приложения для рисования, рассматриваемого в главе б. 


О Код можно поместить во внешние файлы. Удаление кода из разметки в от- 
дельный блок страницы — это шаг по направлению к удалению его из страницы 
вообще и помещению в отдельный файл. Это действие по улучшению организа- 
ции страницы рассматривается в следующем разделе. 


П Возможность добавлять события. Событие — это метод, посредством которо- 
го странице можно дать указание выполнить определенную функцию, когда 
происходит определенное действие. Веб-страницы движимы событиями. Это 
означает, что большинство кода исполняется, когда происходит какое-либо со- 
бытие (а не запускается из блока кода Гауаб стр. Для событий требуются функ- 
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ции, и события позволяют активировать функции, не прибегая к дополнитель- 
ному блоку кода, как мы увидим в разд. "Реагирование на события" далее в 
этом приложении. 


ПРИМЕЧАНИЕ 


В страницу можно вставить любое количество блоков <ѕсгірё>. 


Перемещение кода Јауа$сгірё в файл сценариев 


Собрав весь код ЛауабспрЕ в набор функций и поместив их в отдельном блоке стра- 
ницы, мы сделали первый шаг по направлению к упорядочиванию содержимого 
веб-страницы. Вторым шагом будет удаление всего этого кода из веб-страницы во- 
обще и помещение его в отдельном файле. Это позволит нам получить более про- 
стые веб-страницы меньшего объема, а также возможность использовать одни и те 
же функции в разных веб-страницах. По сути, помещение кода сценариев в отдель- 
ный файл аналогично помещению в отдельный файл правил стилей С55. В обоих 
случаях мы получаем возможность повторного использования нашего кода и созда- 
ем более простые страницы. 


ПРИМЕЧАНИЕ 


Практически все веб-страницы с хорошим дизайном, в которых используются сцена- 
рии УЧауа$спрь, помещают этот код в один или несколько отдельных файлов. Единст- 
венным исключением будет несколько строк предельно простого кода, который досто- 
верно не будет использоваться нигде больше или же в случае единичного образца 
сценария. 


Файл сценария — это простой текстовый файл с расширением ]5 (обозначающим 
Тауабспро. Код помещается в файл сценариев таким же образом, как и в файл веб- 
страницы, но без использования элемента <ѕсгірї>. В качестве примера далее при- 
ведено полное содержимое файла сценариев Меѕѕаре$сгіріѕ.ј5: 


Ғипсііоп зһомМеѕѕаде () { 


а1егі ("Ме іпбеггорі 013 мер раде міёһ а зрес1а1 " + 
"Јауаѕсгірі аппоппсемере.") ; 


} 


Сохраните этот файл в той же папке, что и веб-страницу. В блоке <ћеаа> веб- 
страницы определяем блок <ѕсгіре>, но не помещаем в него никакого кода. Вместо 
этого вставляем в блок атрибут ѕгс и в качестве значения присваиваем ему имя на- 
шего файла сценариев: 


<!РОСТУРЕ Һёт1> 
<ҺЕпі 1апа="еп"> 
<Һеаа> 
<пефа срахзее="аеЕ-8"> 
<Е1Е1е>А 51тр1е Фауабсг1ре Ехапріе</+іё1е> 
<ѕсгірё ѕгс="МеѕѕадеЅсгіріѕ.јѕ"></ѕсгірё> 
</ћеаа> 
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<роау> 
<р>АЕ зопе роіпі іп һе ргосеѕѕіпд оЕЁ {13 раде, а зѕсгірі р1Іоск 
№111 гоп ара зВом а меззаде рох.</р> 


<ѕсгірё> 
ѕзһомМеѕѕаде () 
</ѕсгірі> 
<р>ТЕ уой деф Һеге, уоџ'уе а1геаЯу зееп ії.</р> </ройу> </һіёт1> 


Когда браузер обнаружит этот блок сценариев, он запросит файл Меѕѕаре$сгіріѕ.јѕ и 
будет рассматривать содержащийся в нем код, как будто бы тот находится в веб- 
странице. Это означает, что функцию зпомМеззаде() можно вызывать точно таким 
же образом, как мы это делали ранее. 


ПРИМЕЧАНИЕ 


Хотя при использовании отдельных файлов сценариев блок <ѕсгірі> в действитель- 
ности не содержит никакого кода, его все равно нужно закрывать тегом </ ѕсгірі>. 
В противном случае браузер будет полагать, что все, что следует за открывающим те- 
гом <ѕсгірі>, т. е. остальная часть страницы, является частью Јауа$сгірї-кода. 


Страницу можно связать с файлом сценариев на другом веб-сайте. Для этого вме- 
сто простого имени файла атрибуту згс нужно присвоить полный ОКІ файла (на- 
пример, ћр://Ѕ$ирегЅсгіріЅіќе.сот/Меѕѕасе$сгірё.јѕ). Эта технология позволяет 
подключать услуги других веб-компаний, например Сооз]е Марѕ (см. разд. "Ото- 
бражение карты" главы 12). 


Реагирование на события 


На данном этапе мы рассмотрели только один способ исполнения сценария — 
в ходе загрузки страницы. Но намного чаще требуется исполнять код после завер- 
шения загрузки страницы, когда пользователь выполняет какое-либо действие, на- 
пример нажимает кнопку или наводит указатель мыши на какой-либо элемент 
страницы. 


Для этого нужно использовать события (еуепіѕ) Лауабсирь которые представляют 
извещения, отправляемые элементом НТМГ в ответ на определенные развития. 
Так, каждый элемент НТМГ, имеет ЈауаЅсгірі-событие огпмоџѕеоуег, которое сраба- 
тывает при наведении указателя мыши на элемент, например блок текста, ссылку, 
изображение, ячейку таблицы, текстовое поле и т. п. В результате срабатывания 
события исполняется связанный с ним код. 


Здесь возникает естественный вопрос: а каким образом код связывается с событием 
элемента? Для этого необходимое событие нужно добавить в элемент в качестве 
атрибута, а в качестве значения этого атрибута указать требуемую функцию. Таким 
образом, если мы хотим связать определенный код с событием опмоџѕеоиї элемента 
<іло>, то можем это сделать так: 


«іта згс="заппу.)рд" а1{="А зиппу дау" оптоцѕеоуег="ѕҺоиМеѕѕаде () "> 
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ПРИМЕЧАНИЕ 


В Јауа$сгірі имена функций, переменных и объектов являются чувствительными к ре- 
гистру, что означает, что зВомМЕЗЗАСЕ — не одно и то же, что зпомМеззаае . Но имена 
атрибутов событий не чувствительны к регистру, т. к. они технически являются частью 
разметки НТМЕ, который относится терпимо к любой комбинации букв верхнего и ниж- 
него регистра. Тем не менее, распространенной практикой является написание атри- 
бутов событий без прописных букв (как показано в примере ранее), т. к. это соответст- 
вует старым правилам ХНТМЕ; в любом случае, большинство программистов слишком 
ленивые, чтобы постоянно тянуться к клавише <5В >. 


Теперь наведение указателя мыши на изображение активирует событие 
опМоизеоуек, в ответ на которое браузер вызывает функцию зВомМеззаае (), ВЫВОДЯ- 
щую уже знакомое окно сообщения (рис. П2.2). Функция, вызываемая в ответ на 
срабатывание события, называется обработчиком события. 


Е 
— а. =. 
1) ЈамаЅстірё Емепіѕ ЕЗ ей я: 
© ә |0) пело:/Оезкор/љђ/НтМі5/Аррепаїх В/ЈауаЅспірі Тт > | С || | 3: 


үүе іпќеггирї ћіѕ уеб раде мА а ѕресіаі 
Јауа$сгірї аппоипсетепії. 


Рис. П2.2. В этом примере окно сообщения выводится не при загрузке страницы, а в любое время 
после того, как пользователь наведет указатель мыши на изображение 


Чтобы эффективно использовать события, нужно знать, какие события поддержи- 
ваются в ЈауаЅсгірё. Кроме того, нужно знать, какие события с какими элементами 
НТМЕ работают. В табл. П2.1 перечислены наиболее часто используемые события 
и элементы НТМГ, к которым они применимы. Более полное справочное руко- 
водство см. по адресу ћќќр://деуеіорег. тох Ша.ого/еп/ООМ/еіетепі. 


Таблица П2.1. Наиболее употребляемые события объектов НТМІ. 


Название 


тывает 
события Сраба ыы 


опС1іск При щелчке по элементу Практически ко всем элементам 


опМоцзеОуег При наведении указателя мыши на эле- Практически ко всем элементам 
мент 
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Название 
события 


опМоозебоё 


Срабатывает 


Когда указатель мыши убирается с эле- 
мента 


Приложение 2 


Таблица П2.1 (окончание) 


Применимо 


Практически ко всем элементам 


опКеуроип 


При нажатии клавиши 


<ѕзе1есі>, <іприёі>, 
<іехіагеар>, <а>, <риііоп> 


опКеу0р 


Когда отпускается нажатая клавиша 


<ѕе1есі>, <іприёі>, 
<іехіагеа>, <а>, <риііоп> 


опЕосиѕ 


При получении фокуса элементом (т. е. 
при выделении элемента мышью, клави- 
шей <ТаБ> или клавишами стрелок). Эле- 
менты включают текстовые поля, флажки 
ит. п. (см. табл. 4.1 для дополнительной 
информации) 


<ѕе1есі>, <іприёі>, 
<іехіагеар>, <а>, <риііоп> 


опВТаг 


Когда элемент теряет фокус 


<ѕе1есі>, <1приа®>, 
<іехіагеар>, <а>, <риііоп> 


опСрапае 


При изменении значения элемента ввода. 
В случае текстового поля срабатывает 
только после перехода на другой элемент 


<зе1ес®>, 
<1прие ёуре="бехі"> 
<іехіагеа> 


опбе1есе 


При выборе части текста в элементе ввода 


<1приббуре="Еехе"> 
<іехіагеа> 


При ошибке загрузки браузером изображе- 
ния (обычно по причине неправильного 
Ову 


<іла> 


По окончанию загрузки браузером новой 
страницы или объекта, такого, как изобра- 
жение 


<ілто>, <роау> 


опуп1оаа 


Когда браузер выгружает страницу. Это 
обычно происходит при переходе на новый 
ОВЕ в строке адреса или по ссылке. Сра- 
батывание происходит до того, как брау- 
зер загрузит новую страницу 


Несколько основных структур 
языка Јауа$сгірї 


<роау> 


Краткого приложения, наподобие этого, недостаточно, чтобы охватить все аспекты 
любого языка программирования, даже такого простого, как Јауа$Ѕсгірі. Но в после- 
дующих разделах мы рассмотрим несколько основных конструкций языка, необхо- 
димых для понимания примеров, приводимых в этой книге. 


Переменные 


Все языки программирования имеют понятие переменных — именованных контей- 
неров, используемых для хранения информации в памяти. В ЈауаЅсгірї переменные 
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создаются с помощью ключевого слова уаг, за которым следует имя переменной. 
Это единственный способ создания переменных в /Лауабспре. Вот пример создания 
переменной пуМеззаде: 


уаг пуМеѕзаде; 


ПРИМЕЧАНИЕ 


Имена переменных в Јауа$сгірі чувствительные к регистру, что означает, что пере- 
менная туМеѕзаде — это совсем другая переменная, чем переменная МумМеѕзасе. При 
попытке использовать первую вместо второй или наоборот в лучшем случае браузер 
выдаст сообщение об ошибке, а в худшем, более частом, случае в странице произой- 
дет какая-либо странная ошибка. 


Данные сохраняются в переменной посредством знака равенства (=), который ко- 
пирует данные из правой его части в переменную, указанную в левой части равен- 
ства. Далее приведен пример объявления переменной и присвоения ей текстового 
значения (которое в программировании называется строкой): 


уаг туМеѕзаде = "Еуегуроду 1оуез уагіар1еѕ"; 


Эту переменную потом можно использовать в коде: 


// Отображаем значение переменной в окне сообщения. 
а1егё (туМеѕѕаде) ; 


ПРИМЕЧАНИЕ 


Язык Јауа$сгірї печально известен своей вседозволенностью и разрешает использо- 
вать переменные, даже если они не были объявлены заранее с помощью ключевого 
слова уаг. Но это чрезвычайно плохая практика, которая может вылиться в нелепые 
ошибки. 


Значение пи! 


В ЈауаЅсгірі переменным может присваиваться специальное значение пи11, которое 
означает отсутствие значения. Значение переменной, равное по11, означает, что 
данного объекта не существует. В зависимости от контекста это может указы- 
вать на то, что определенная возможность недоступна. Например, Мойегпіхг 
(см. разд. "Определение возможностей с помощью Мойетігг" главы 1) использует 
тестирование на по11, чтобы определить поддержку браузером определенных воз- 
можностей НТМГ5. Тестирование на по11 можно применять и в своих сценариях, 
например, чтобы определить, был ли уже создан или сохранен объект: 


1Е (юмуОбјесі == пи11) { 
// Объект туоОрјесі не существует. 


// Теперь, может быть, удачное время, чтобы создать его. 


Область видимости переменных 


Переменные можно создавать в двух основных местах — внутри функции и вне 
функции. Следующий фрагмент кода содержит оба эти типа переменных: 
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<ѕсгірё> 
уаг оџізіаеуагіар1е; 


Ғипсііоп аоЅотеёһіпд() { 
уаг іпѕіае\уагіар1е; 


} 
</зсг1рЕ> 


Созданная внутри функции переменная называется локальной переменной и суще- 
ствует только на протяжении времени исполнения этой функции. В приведенном 
примере переменная іһпѕідеуагіаріе является локальной. Как только метод 
доЅотеёћіпа () завершает исполнение, эта переменная удаляется из памяти. Это оз- 
начает, что при следующем вызове метода дозомееь1та() переменная 
іпѕіаеуагіар1е создается заново и получает новое значение. 


С другой стороны, значение переменной, созданной вне функции (такие перемен- 
ные называются глобальными), сохраняется на протяжении всего времени, пока 
страница загружена в браузере. Вдобавок такие переменные могут использоваться 
всеми функциями. В приведенном примере переменная оџѕідеуагіар1е является 
глобальной. 


СовеТ 


Используйте локальные переменные за исключением случаев, когда переменную 
нужно сделать доступной для нескольких функций или же сохранить ее значение по- 
сле исполнения функции. Отслеживание глобальных переменных требует больше 
усилий и большое количество таких переменных загромождает код. 


Типы данных переменных 


Переменные Јауа8сгірі могут содержать разные типы данных, такие как текст, це- 
лые числа, числа с плавающей запятой и объекты. Но независимо от типа данных, 
которые вы намереваетесь хранить в переменной, все они создаются посредством 
одного и того же ключевого слова хаг. При этом тип данных для конкретной пере- 
менной не указывается. 


Это означает, что можно взять переменную пуМеззаде, которая содержит текстовую 
строку, и присвоить ей числовое значение: 


пуМеззаае = 27.3; 


Такой подход облегчает использование языка ЛауаЗспрь т. к. любая переменная 
может хранить данные любого типа. Но в то же самое время это способствует воз- 
никновению ошибок. Например, мы хотим взять текстовую строку из поля ввода 
и сохранить ее в переменной: 


уаг = 1прасЕ1етепе .уа11е; 


Но если не соблюдать должной осторожности, можно случайно сохранить в этой 
переменной не содержимое объекта, а сам объект: 


уаг = іприёЕ1Іетмепіё; 
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Так как Јауа$Ѕсгірі позволяет выполнять оба типа присваиваний и не может угады- 
вать мыслей программиста, он воспримет последнее присвоение как должное. Но 
дальше в коде эта оплошность, скорее всего, вызовет какую-либо неисправимую 
ошибку исполнения. Браузер просто прекратит выполнение оставшегося кода и не 
выдаст вам никаких сообщений об ошибке, объясняющих ее причину. 


Арифметические операции 


Простая возможность присваивать переменным значения вряд ли объясняла бы 
надобность в них. По настоящему полезными переменные делает возможность 
выполнять над ними операции, модифицирующие содержащиеся в них данные. На- 
пример, с переменными можно применять арифметические операторы для выпол- 
нения математических вычислений: 


уаг муМитбехг = (10 + 5) * 2/5; 
Вычисления выполняются в стандартном порядке — сначала в скобках, затем 


умножение и деление, а потом сложение и вычитание. Результатом этих операций 
будет 6. 


С помощью операторов можно также конкатенировать несколько текстовых строк 
в одну длинную строку. Для этого используется оператор "плюс" (+): 


уаг Е1хз Мате = "Ѕагаһ"; 
уаг 1азЕМаше = "Ѕтіёһегѕ"; 
уаг Ёџ11Матпе = Е1хзЕМапе + " " + 1аз&Мапе; 


В результате исполнения приведенного кода переменная Е011Маме будет содержать 
текстовое значение "Ѕагаһ Ѕпіїћегѕ". (Пробел в кавычках (" ") используется для 
того, чтобы оставить промежуток между именем и фамилией.) 


Простые арифметические операции можно обозначать С ПОМОЩЬЮ сокращенной 
нотации. Например, следующую простую операцию сложения 
уаг туМотрег = 20; 


туМопрег = туМопрег + 10; 
// (Теперь значение переменной пуМотрег равно 30.) 


можно записать так: 


уаг туМопрег = 20; 
пуМотрег += 10; 
// (Теперь значение переменной пуМотрег равно 30.) 


Прием с переносом оператора на левую сторону знака равенства работает, по 
большому счету, со всеми операторами. Вот еще несколько примеров: 


уаг туМопрег = 20; 

пуМотрег -= 10; 

// (Теперь значение переменной туМитрег равно 10.) 
пуМотретг *= 10; 

// (Теперь значение переменной туМитрег равно 100.) 
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уаг туТехі = "Не11о"; 

уаг туТехі += " {еге."; 

// (Теперь значение переменной пуТехі равно "Не11о {Веге.") 


А добавить или вычесть единицу можно еще более простым способом: 


уаг туМопрег = 20; 
пуМотрег++; 


// 


(1 


Геперь значение переменной туМипрег равно 21.) 


туМотрег--; 


// 


(1 


Геперь значение переменной туМипрег равно 20.) 


АВАРИЙНАЯ СИТУАЦИЯ 
Поиск ошибок в коде Лауа$ спрё 


Чтобы находить и исправлять ошибки в коде Јауа$сгірї (наподобие ошибки присвое- 
ния переменной объекта вместо строки, рассмотренной ранее), нужно научиться вы- 
полнять отладку — выявление причин проблем в коде и их устранение. К сожалению, 
способ выполнения отладки зависит от используемого браузера, и разные браузеры 
имеют различные отладочные средства (или поддерживают разные отладочные мо- 
дули расширения). И хотя все эти средства предназначены для выполнения одинако- 
вой задачи, они применяют для этого не совсем одинаковые методы. 


К счастью, в сети можно найти всю требуемую информацию для выполнения отладки 
на разных браузерах. Далее приводятся ссылки на некоторые ресурсы. 


• |мегпе ЕхрІогег. Чтобы начать процесс отладки, нажмите клавишу <ЁЕ12>; откро- 
ется окно Средства разработчика (Пеуеорег Тоо!ѕ). Подробные инструкции по 
использованию этого средства см. здесь: Һїр://тѕйп.тісгоѕоѓй.сот/іе/аа740478. 


• Ғігеѓох. Серьезные разработчики платформы Еігеѓох используют модуль расшире- 
ния Еігебид (Һїр://деїгебид.сот/јауаѕсгірі), который позволяет наблюдать за ис- 
полнением кода в любое время. Кроме этого, на сайте Мїр://аеуеіорег.то2Па.ого/ 
еп/Оебиддіпд_Јауа$сгірї можно ознакомиться с документацией от Мо7Ша по 
средствам отладки. 


• (Ооодіе Сһготе. Браузер Сһготе имеет приличный встроенный отладчик. Обу- 
чающее пособие по его применению доступно по адресу Һір://соде.доодіе.сот/ 
сһготе/ехіепѕіопѕ/иї дериддіпд.һіті. 


• Орега. Браузер Орега имеет встроенный отладчик Огадопйу (см. описание по ад- 
ресу мм\м.орега.сот/агадопӣу), а по адресу ИНр:/Атуи!.сот/З9пу7\м можно най- 
ти хороший обзор основных методов отладки. 


• баїагі. Браузер Ѕаѓагі имеет мощный набор встроенных средств отладки, хотя най- 
ти документацию по ним, может быть, несколько проблематично. Для начала озна- 
комьтесь с технической статьей из библиотеки Ѕаѓагі ОСехеіорег Шбгагу по адресу 
Вр:/Атуии.сот/6Зот77С. 


Помните, что не имеет значения, каким браузером и отладочными средствами поль- 
зоваться, чтобы исправить проблемы со страницей. Когда они исправлены, то исправ- 
лены для всех браузеров. 


Условные переходы 


Все условные переходы начинаются с условия: выражения, значение которого мо- 
жет быть или +гое (истина), или Еа1зе (ложь). В зависимости от значения выраже- 
ния принимается решение, выполнять определенную часть кода или пропустить ее. 
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Условия создаются с помощью операторов сравнения и логических операторов 
(табл. П2.2). 


Таблица П2.2. Логические операторы 


Оператор Описание 


Равно 


Не равно 


Мос (не, этот унарный оператор изменяет значение своего операнда на проти- 
воположное, т. е. с истины на ложь и наоборот) 


Меньше 


Больше 


Меньше или равно 


Больше или равно 


Логическое "И". Вычисляется, только если значения обоих операндов равны 
гое (истина). Если значение первого операнда равно ға1ѕе (ложь), значение 
второго операнда не вычисляется 


Логическое "Или". Вычисляется, если значение любого из операндов равно 
Е гие. Если значение первого операнда равно Е гие, значение второго опе- 
ранда не вычисляется 


Далее приведен пример простого сравнения: 


пуМотрег < 100 


Чтобы это сравнение превратить в условие, его надо использовать в операторе 
условного перехода 1Е. Вот пример такого оператора: 
1Е (љуМопрег < 100) { 


// (Этот код исполняется, если значение переменной туМипрег 


// равно 20, и не исполняется, если оно равно 147.) 


ПРИМЕЧАНИЕ 


Вообще, код, исполняющийся, когда условие истинно, не обязательно заключать в фи- 
гурные скобки, если только он не состоит из нескольких операторов. Но использова- 
ние этих скобок всегда делает код более понятным и помогает избежать возможных 
ошибок в случае нескольких операторов. 


При проверке на равенство всегда используются два знака равенства, т. е. ==. Один 
знак равенства является оператором присваивания и устанавливает значение пере- 
менной, а не выполняет требуемое нам сравнение: 


// Правильно: 
1Е (пуМаше == "Рое") { 


} 
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// Неправильно: 
1Е (пуМаше = "Ѕагаһ") { 


} 


Чтобы оценить несколько условий, одно за другим, используется несколько блоков 
1Е. Но если среди нескольких условий нужно выбрать одно, игнорируя прочие, 
к оператору іғ добавляется ключевое слово е1зе. Далее приведен пример исполь- 
зования оператора е1зе: 


1Е (пуМотрек < 100) { 
// (Этот код исполняется, если значение переменной туМопрег меньше 100.) 


} 

е1зе і? (туМопрег < 200) { 
// (Этот код исполняется, если значение переменной туМопрег меньше 200, 
// но больше или равно 100.) 


} 


е1зе { 
// (Этот код исполняется во всех других случаях, т. е. когда 
// значение переменной шуМатбет равно или больше 200.) 


} 


Блок 1Е может содержать любое количество условий, а использование конечного 
е1зе без условия не является обязательным. 


Циклы 


Цикл — это основной инструмент программирования, позволяющий повторно ис- 
полнять блок кода. Основным циклом в языке Јауа$сгірі является цикл Еог, кото- 
рый имеет встроенный счетчик. Большинство языков программирования имеет 
свои версии этой управляющей структуры. 


При создании цикла Еог устанавливается начальное значение счетчика, конечное 
значение и шаг инкремента после каждого прохода. Вот пример цикла ра ора 
Еог (уаг і = 0; і < 5; 1++) { 

// (Этот код исполняется пять раз.) 


а1егі ("Тһіѕ 13 шеззаае: " + 1); 


} 


В начале цикла в круглых скобках указываются данные счетчика. Сначала создает- 
ся переменная счетчика и ей присваивается значение 0 — хаг і = 0. Потом указы- 
вается конечное значение счетчика, т. е. условие для завершения цикла — і < 5. 
Если условие не удовлетворяется, например значение і равно 5, цикл завершается, 
и код внутри больше не исполняется. Последнее выражение — 1++ — увеличивает 
значение переменной счетчика на единицу при каждом проходе цикла. (Все эти вы- 
ражения разделяются точкой с запятой.) Это означает, что для первого прохода 
цикла значение 1 будет 0, для второго 1 ит. д. В итоге код цикла исполняется пять 
раз и выводит такую последовательность сообщений: 


Ж, 


Гһіѕ 1$ пеззасе: 0 


С 


Гһіѕ 1$ пеззасе: 1 
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Е 


Гһіѕ 1$ пеззасе: 2 


Гһіѕ 1$ пеззасе: 3 


м 


Гһіѕ 1$ пеззасе: 4 


Массивы 


Цикл естественно сочетается с массивом — объектом программирования, в кото- 
ром сохраняется несколько значений. 


Массивы Јауа$сгірі обладают высшей степенью гибкости. В отличие от других 
языков программирования, при объявлении массива в ЈауаЅсгірі его размер не ука- 
зывается. Массив создается с помощью ключевого слова хак, за которым следует 
имя массива: 


уаг со1огііѕі = []; 
Значения последовательным элементам массива присваиваются посредством мето- 
да ааа () объекта массива: 


со1огІізі .ааа ("Б1ае"); 


со1огІ1ізі.ааа ("агееп") ; 


со1огІізіё.ааа ("геа"); 


Можно также присвоить значение определенному элементу массива. Если данный 
элемент не существует, он создается автоматически: 


со1огі1зѕі [3] = "мадерба"; 


Можно извлекать значения из конкретных элементов массива, присваивая их обыч- 
ным переменным: 


уар со1ог = соїІогіізіё [3]; 


ПРИМЕЧАНИЕ 


Следует иметь в виду, что в Јауа$сгірї счет ведется с нуля: номер первого элемента 
массива равен 0, второго — 1 ит. д. 


Элементы массива можно обрабатывать, используя ЦИКЛ Еог: 


Ғог (уаг і = 0; і < соІог1Іізі.Іепоёћ; 1++) { 
аїегі ("Еоџпа со1ог: " + соїогіізіё[1]); 


} 


Этот код обрабатывает элементы массива от первого (ячейка с номером 0) до по- 
следнего (номер которого определяется посредством свойства массива Іепаёһ, ко- 
торое возвращает общее количество элементов массива). Код отображает значение 
каждого элемента массива в окне сообщений, хотя, несомненно, можно было бы 
придумать более практичное применение. 


Использование цикла Рог для обработки массивов является одним из основных ме- 
тодов в ЈауаЅсгірі. В книге мы будем часто использовать этот метод, как с массива- 
ми, создаваемыми нами, так и с массивами, предоставляемыми другими функциями 
Јауа$сгірі. 
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Функции, которые получают и возвращают данные 


Ранее мы рассмотрели простую функцию звомМеззаде (). При вызове этой функции 
ей не нужно предоставлять никаких данных, а по завершению исполнения она не 
возвращает никакой информации. 


Функции не всегда такие простые. Во многих случаях функциям нужно передавать 
информацию или же получить результаты исполнения функции и использовать их 
для другой операции. Допустим, что нам нужно создать версию функции 
зпомМеззаде (), которая может показывать разные сообщения. Для этого функцию 
ѕћһомМеѕѕаде () нужно модифицировать так, чтобы она принимала параметр. Этот 
параметр представляет любой текст, который мы хотим отображать посредством 
этой функции. 


Чтобы оснастить функцию параметром, ему нужно присвоить имя, например 
сизфопМеззаде, и поместить его в круглые скобки после названия функции: 


Ғопсііоп зһомМеѕѕаде (сиѕёотМеѕѕаде) { 
а1Іегі (соиѕіопМеѕѕаде); 


ПРИМЕЧАНИЕ 


Функция может принимать любое количество параметров. Множественные параметры 
в списке разделяются запятыми. 


Внутри функции параметры используются, как обычные переменные. В этом при- 
мере функция просто принимает предоставленный ей текст и отображает его в окне 
сообщения. 


Теперь при вызове функции зВомМеззаде() ей нужно передать значение (которое 
называется аргументом!) для каждого параметра функции: 


зһомМеѕѕаде ("Мороду 11ікезѕ ап агаомепте."); 


Таким образом, параметры позволяют передавать информацию функции. Можно 
также создать функцию, отправляющую информацию назад коду, который вызвал 
се. Для этого с функцией используется команда геіигп, которая помещается в са- 
мом конце функции. Эта команда немедленно прекращает выполнение функции и 
возвращает созданную функцией информацию. 


Конечно же, продвинутая функция может принимать и возвращать информацию. 
Так, далее приводится пример функции, которая умножает два передаваемых ей 
числа (параметры попрегА и потрегв) и возвращает полученный результат: 


Ғипсііоп пио1ёір1уМопрегѕ (потрегА, попрегВ) { 
геёџгп поипрегА * попрегвВв; 


' Часто термины "параметр" и "аргумент" используют взаимозаменяемо, но между ними есть разни- 
ца. Вкратце эту разницу можно определить следующим образом — параметры принимаются, а аргу- 
менты передаются. 
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Вот пример, как эту функцию можно использовать на странице: 


// Передаем функции два числа и получаем результат. 
уаг гези1 = ти1+ір1уМотрегѕ (3202, 23405); 


// Используем результат, чтобы создать сообщение. 
уаг пеѕзаде = "Тһе ргоЧисЕ оЕЁ 3202 апа 23405 1$ " + геза1{; 


// Отображаем сообщение. 
зһомМеѕѕаде (меззаде) ; 


Конечно же, для того чтобы умножить два числа, нам функция не нужна (это мож- 
но сделать посредством обычных операций ЈауаЅсгірі), также как и не нужна нам 
функция для отображения окна сообщения (поскольку встроенная функция а1ег+ () 
может прекрасно справиться с этой задачей). Но эти примеры служат хорошей ил- 
люстрацией работы и применения функций, и мы будем использовать параметры и 
возвращаемые значения точно таким же образом в более сложных функциях. 


Взаимодействие со страницей 


Итак, мы знаем, как правильно вставить код ЈауаЅсгірї в страницу, но кроме вывода 
окна сообщения мы еще не применили эти знания для выполнения какой-либо 
практической задачи. И прежде чем начать двигаться в этом направлении, нам 
нужно узнать немного больше о типичной роли Лауабспре. 


Прежде всего, важно понимать, что код ЛауабспрЕ исполняется в "песочнице". Это 
означает, что его возможности тщательно ограничиваются. Этот код не может вы- 
полнять задачи, потенциально угрожающие безопасности компьютера посетителя, 
такие как, например, управление принтером, обращение к файлам, исполнение дру- 
гих программ, форматирование жесткого диска и т. п. Такой подход позволяет хо- 
рошо обезопасить компьютер даже самых неосторожных посетителей. 


Большую часть времени Јауа$сгірї выполняет следующие задачи. 


ОС Обновляет страницу. Код сценария может изменять, удалять и добавлять эле- 
менты страницы. Более того, Јауа8сгірі-код может изменить каждый аспект те- 
кущей отображаемой страницы и даже полностью заменить весь документ. 


П Получает данные с сервера. Сценарий ЈауаЅсгірі может запрашивать данные 
с того же самого веб-сервера, который предоставил исходную страницу. Сочетая 
этот метод с предыдущим, можно создавать веб-страницы, которые плавно об- 
новляют важную информацию, например список новостей или биржевые коти- 
ровки. 


П Отправляет данные на веб-сервер. В НТМІ уже имеется способ отправки 
данных с использованием веб-форм (см. главу 4), но в ЈауаЅсгірі применяется 
более тонкий подход. Он позволяет снимать данные с элементов формы, прове- 
рять действительность этих данных и даже отправлять их на веб-сервер, и при 
этом не заставляя браузер обновлять страницу. 
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Для реализации последних двух видов задач требуется использовать объект 
ХМІнЕєрВеаџеѕё, расширение ЈауаЅсгірі, которое рассматривается в разд. "Объект 
ХМІНирКедиеѕі" главы 11. В последующих разделах мы рассмотрим первую из пе- 
речисленных задач, которая является главной частью почти каждой веб-страницы, 
движимой Јауа$Ѕсгірі. 


Манипулирование элементами 


С точки зрения ЈауаЅсгірі веб-страница является большим, чем просто статическим 
блоком кода НТМГ. Для этого кода каждый элемент разметки является объектом, 
который можно исследовать и модифицировать. 


Самый простой способ получить доступ к объекту — это присвоить ему однознач- 
ное имя, что реализуется с помощью атрибута 1а объекта. Вот пример присвоения 
имени объекту: 


<Һ1 14="радет1Е1е">Ме1соме ёо Му Раде</һ1> 


Элемент, которому присвоено однозначное имя, можно с легкостью найти в коде и 
манипулировать им посредством кода ЈауаЅсгірі. 


Для поиска объектов в ЈауаЅсгірі применяется метод оеїЕ1етепіВвута() объекта 
аоситепе. По большому счету, аоситере — это объект, который представляет весь 
документ НТМГ. Он всегда доступен, и его можно использовать в любое время. 
Этот объект документа имеет значительное количество полезных свойств и мето- 
дов. Метод чекЕ1етеревута() является одним из самых полезных — с его помощью 
можно просканировать веб-страницу, чтобы найти требуемый элемент НТМІ. 


ПРИМЕЧАНИЕ 


Если вы знакомы с основами объектно-ориентированного программирования, то 
должны знать, что такое свойства и методы. Если же нет, то свойства можно предста- 
вить как прикрепленные к объекту данные, а методы, как встроенные в объект функ- 
ции. 


При вызове метода досотепе .декЕ1етеревута() ему передается идентификатор эле- 
мента НТМГ, который требуется найти. В следующем примере показан код для по- 
лучения элемента НТМЕ с идентификатором радет1 еле: 


уаг іії1ІеОбјесі = аосимеп® .деіЕ1етепіВуІа ("рачет11е"); 


Этот код получает объект элемента <һ1>, который был показан ранее, и сохраняет 
его в переменной $1Е1е0ОБ)есе. Над сохраненным в переменной объекте можно вы- 
полнять разные операции, не требуя поиска его каждый раз для каждой операции. 


Какие же операции можно выполнять над объектами НТМГ? В некоторой степени, 
ответ зависит от типа элемента, с которым мы работаем. Например, если объект — 
гиперссылка, можно изменить его ОВГ, а если объект — изображение, то можно 
изменить его источник. Некоторые операции можно выполнять почти со всеми 
элементами НТМГ, например, изменять стиль или текст между открывающим и 
закрывающим тегами. Как мы увидим далее, эти возможности позволяют сделать 
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страницы динамическими, например, изменить внешний вид страницы, когда посе- 
титель исполняет на ней какое-либо действие, скажем, щелкает по ссылке. Подоб- 
ные ответные действия вызывают у посетителя чувство взаимодействия с интел- 
лектуальной, реагирующей программой, а не простой, инертной веб-страницей. 


Далее приведен пример, как можно модифицировать текст нашего подопытного 
элемента <һ1>: 


б1ё1еОюјесі.іппегнНтмі = "Тһіѕ Раде Тз рупатіс"; 


Этот код присваивает свойству 1ппехкнтмь объекта єіє1еорјесеє (это наш элемент 
<һ1>) текстовое значение, которое отображается как содержимое этого элемента. 
Свойство іппегнтмі — это всего лишь один аспект объекта НТМІ, который можно 
изменять. Для создания кода для работы со свойствами объектов нужно знать, ка- 
кие свойства Јауа$сгірі разрешает модифицировать. 


Очевидно, что некоторые свойства относятся только к определенным элементам 
НТМЕ, например атрибут зхс, который используется для загрузки изображения 
в элемент <іто>: 


уаг іпдОрјесі = аосиопепі .деёЕ1епепЕВуІа ("аауТтаае"); 


ЧауТтаде.згс = "с1оџау.јрд"; 
А посредством свойств объекта ѕєуіе можно изменять свойства С88: 
іЄ1еОрјесі.зіу1Іе.со1ог = "каф (0,191,255) "; 


Современные браузеры поддерживают огромный список свойств РОМ, которые 
можно использовать практически со всеми элементами НТМІ. Некоторые из наи- 
более полезных свойств приведены в табл. П2.3. 


Таблица П2.3. Наиболее употребляемые свойства объектов НТМЁ 


Свойство Описание 


сТаѕѕМате Позволяет получить или установить атрибут с1азз (см. 

разд. "Форматирование элементов посредством классов" приложения 1). 
Иными словами, это свойство определяет применяемые элементом стили 
(если таковые используются). Конечно же, этот стиль нужно сначала опре- 
делить во встроенной или связанной со страницей таблице стилей, иначе 
получится простое форматирование по умолчанию 


іппегнНтТмІі, Позволяет считывать или изменять содержимое элемента НТМЕ. Свойство 
іппегнтмі очень полезно, но имеет две особенности. Первая: его можно 
использовать на всем содержимом НТМЕ, включая текст и теги. Поэтому 
вставить в абзац полужирный текст можно, присвоив свойству іппегнтмі, 
значение <р>ні</р>. Вторая: присвоенное свойству 1ппехНТМТ, новое зна- 
чение затирает все старое содержимое этого элемента, включая все другие 
элементы НТМЕ. Таким образом, если присвоить новое значение свойству 
іппегнтмі элемента <аіу>, который содержит несколько абзацев текста и 
изображений, все это содержимое будет заменено новым содержимым 


рагепёЕ1етепё Предоставляет НТМІ-объект элемента, содержащего текущий элемент. 

Например, если текущий элемент является элементом <Ъ> в абзаце <р>, 
это свойство возвращает объект этого элемента <р>. Полученный таким 
образом объект также можно модифицировать 
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Таблица П2.3 (окончание) 


Свойство Описание 


Объединяет все атрибуты С55, которые определяют внешний вид элемен- 
та НТМЕ. Свойство ѕёу1е возвращает полноценный объект эк у1е и для 
изменения атрибута стиля нужно добавить еще одну точку, а потом назва- 
ние этого атрибута. Например, муЕ1етепе .ѕёу1е. Ғопіѕіхе. С помощью 
объекта ѕїу1е можно устанавливать цвет, границы, шрифт и даже позицио- 
нирование элемента 


Предоставляет название элемента НТМІ для данного объекта без угловых 
скобок. Например, значением сазМате элемента <1та> будет текст іта 


СОВЕТ 


Элементы НТМІ также имеют небольшой набор полезных методов, включая методы 
для модифицирования атрибутов, такие как сде+Адібгіроёе () и ѕеёдібгіроѓе (), а 
также для добавления или удаления элементов, такие как іпѕегіЕсһі1а(), 
аррепасһі1а () и гетоуесһі1а(). Дополнительную информацию о свойствах и мето- 
дах, поддерживаемых определенными элементами НТМЕ, см. в справочной докумен- 
тации от Мо7Ша по адресу ИЧр://4еуеюрег.то2Ша.огд/еп/ООМ/е!етеги. 


Динамическое подключение к событию 


В разд. "Реагирование на события" ранее в этом приложении мы рассмотрели, как 
запустить функцию на исполнения с помощью атрибута события. Но событие так- 
же можно подключить к функции, используя код Јауа$сгірі. 


В большинстве случаев, скорее всего, для подключения события к коду следует ис- 
пользовать атрибуты событий. Но в некоторых случаях этот подход невозможен 
или неудобен. Одним из самых распространенных примеров будет создание объек- 
та НТМЕ в коде и последующее динамическое добавление его в страницу. В дан- 
ной ситуации разметка для нового элемента отсутствует, вследствие чего использо- 
вание атрибута события не возможно. (Этот метод применяется в примере рисова- 
ния на холсте в главе 6.) Другим примером будет подключение события к 
встроенному объекту, а не к элементу. (Этот случай рассматривается в примерах 
обработки событий хранилища в главе 9.) По всем этим причинам важно понимать, 
как подключать события к коду. 


ПРИМЕЧАНИЕ 


Существуют разные способы подключения событий, но не все они поддерживаются 
всеми браузерами. В этом разделе применяется подход свойства события, который 
поддерживается всеми браузерами. Кстати, если вы решите использовать какой-либо 
инструментарий Јауа$сгірї, наподобие |Оиегу, то, скорее всего, обнаружите, что он 
предоставляет еще одну систему подключений событий, которая будет работать на 
всех браузерах и может иметь несколько дополнительных возможностей. 


К счастью, подключение событий не представляет ничего сложного. Нужно просто 
установить свойство события с таким же именем, как и атрибут события, который 
бы использовался в обычной ситуации. 
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Например, пусть где-то на странице есть элемент <іто>: 


<іта 1а="ЧауТтаде" ѕгс="ѕиппу.јро" а1ё="Тһе меаёһег"> 


Браузеру можно дать указание вызвать метод ѕкарітаде () при щелчке мышью по 
этому изображению с помощью следующего кода: 


уаг іпдОрјесі = Ӣоситепі .деёЕ1епепЕВута ("дауІтаде"); 
ітдОЬјесі.опс1іск = змарПпаде; 


Но будьте осторожны, чтобы не сделать эту ошибку: 


ітсдОюјесі.опс1іск = змарІтаде (); 


Этот код выполняет функцию ѕмарІтаде () и использует ее результат (если функция 
возвращает таковой), чтобы установить обработчик события. Это почти наверняка 
не то, что нам нужно. 


Чтобы понять, что в действительности происходит при щелчке по элементу <ітор, 
нужно разобраться с кодом функции ѕмарІтаде (). Эта функция берет элемент <іто> 
и модифицирует его атрибут ѕгс, чтобы тот указывал на новое изображение 
(рис. П2.3): 


// Отслеживаем состояние изображения — день или ночь. 


уаг ЧауТлие = ігџе; 


// Эта функция выполняется, когда происходит событие опС1іск. 


Ғипсііоп змарТмаае\() { 


уаг іпдОрјесі = Чосимепе .дееЕ1етерВуТа ("дауІтаде"); 


// Меняем день на ночь или наоборот и обновляем изображение 

// в соответствии с новым состоянием. 

1Е (аауТіте == 6хие) { аауТіте = Ға1ѕе; 

ітсдОрјесё.ѕгс = "с1оџӣу.јрд"; } 
е1зе { ЧауТ1ме = Егие; 
ітсдОрјесё.зѕгс = "ѕиппу.јрд"; } 

} 
Иногда событие передает информацию своему обработчику. Чтобы получить эту 
информацию, функции нужно дать один параметр. По соглашению, этот параметр 
обычно называется еуепё или просто е: 


Ғипсііоп эмарІмаде (е) { 


} 


Свойства объекта события зависят от этого события. Например, событие 
опМоизеМоуе предоставляет текущие координаты указателя мыши (которые исполь- 
зуются в программе рисования в разд. "Создание простой программы рисования" 
главы б). 


Нужно отметить еще одну деталь. При подключении события название события 
в обязательном порядке пишется строчными буквами. Это отличается от подклю- 
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чения события с использованием атрибута в НТМГ. В отличие от НТМІ ЈауаЅсгірі 
обращает внимание на регистр. 


ПРИМЕЧАНИЕ 


В книге названия событий даются в соответствии с соглашением Сате!Сазе', по кото- 
рому каждое новое слово в названии пишется с прописной буквы, например оптоаа 
или опМоцзебуег. Но в коде, согласно требованиям Јама$сгірї, все названия пишутся 
строчными буквами, т. е. опіоаа ИЛИ оптоизеоуег. 


© Мапіриіаќе Ап етеп \ 5 


є С 9 МапіриаїеАпЕіетепі.ћті & | 


Сіск Чи$ рісіше іо сһапре ѕип о сЇоџа (апа баск). 


Рис. П2.3. Щелчок по изображению активирует событие опс1іск этого изображения. 
Это событие в свою очередь активирует функцию, которая загружает новое изображение 


Подставляемые в строку функции 


Для работы предыдущего примера функцию змартТтаде() нужно определить где-то 
в другом месте кода. Иногда вместо этого функцию можно определить в том же 
месте кода, где она подключается к событию. Такая функция называется подстав- 
ляемой в строку (ше РапсНоп). 


Вот пример подключения подставляемой в строку функции к событию опс1іск: 


уаг іпдОрјесі = Ӣоситепі .дчесЕ1етепеВуТа ("аауТтаде") ; 


ітсдОюјесі.опс1іск = ЕапсЕ1оп() { 
// Код функции змарІтаде () теперь вставляется сюда. 
1Е (аауТіюме == 6гае) { 
ЧауТ1те = Ға1ѕе; 
іпдОрјесі.згс = "с1оџау.јрд"; 


См. һр://ги.мікірейіа.огр/мікі/Сате!_саѕе. — Прим. пер. 
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е1зе { 
ЧаауТ1те == $гае; 
іпдОюјесі.ѕгс = "ѕиппу.јрд"; 
} 
}; 


Этот подход к обработке событий применяется менее часто, чем использование 
отдельной, именованной функции. Но это все равно полезный метод для опреде- 
ленных целей и иногда используется в примерах в этой книге. 


ПРИМЕЧАНИЕ 


Подставляемые в строку функции иногда полезны при исполнении асинхронных за- 
дач, т. е. задач, которые исполняются браузером в фоновом режиме. По завершению 
выполнения асинхронной задачи браузер активирует событие, чтобы известить код об 
этом. Иногда самым легким подходом в этой ситуации будет вставка кода для обра- 
ботки завершения задачи непосредственно рядом с кодом, который активировал вы- 
полнение этой задачи. (В конце разд. "Вставка в холст изображений" главы 7 пред- 
ставлен пример такого кода, который асинхронно загружает изображение, а потом 
обрабатывает его.) 


Наконец, есть еще один тип подставляемой в строку функции, которая использует- 
ся во многих примерах в этой книге. Это обработчик события опІоаа окна, который 
активируется после полной загрузки и отображения страницы. Это будет логичной 
точкой для запуска кода. Если попытаться исполнить код до полной загрузки стра- 
ницы, то возможно возникновение проблем, если объект для требуемого элемента 
еще не был создан. Далее показан пример такой функции: 


<ѕсгірё> 
міпаӢомт.опіоаа = Ёцпсёіоп() { 
а1егі ("Тһе раде Ваз јиѕё Ғіпізһеа Іоааіпд."); 
} 
</зсгірё> 


Этот подход позволяет не беспокоиться о местоположении блока сценариев. Таким 
образом, код инициализации можно разместить там, где ему место — в блоке 
<ћһеаа> вместе с остальными функциями ЈауаЅсгірі. 
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